【css】animation-delayが面白い!アニメーションを遅れて実行させる方法!

cssでアニメーションを行うことによって、要素をゆっくり移動させたり色を変えたりすることができるようになります。

 

使用するコードは「animation-delay

cssのアニメーションは遅らせて実行することで、実際の動作は同じなのに「順番に動かす」こともできるので参考にしてみてください。

はじめに

 

今回紹介する内容はcssの「animation-delay」について。

 

animation-delayを使えば、複数の要素のタイミングをそれぞれ変えて実行させることができます。

それによって、イラストが順番に点灯しているようなカスタマイズをすることができますね。

 

○秒待ってから実行みたいな処理ができるよ

 

今回は以下のようなカスタマイズを作成してみました。

 

スクリーンショット 2016-06-16 20.14.31

 

この画像はアニメーションをしていない状態なので、何の変哲もないただの丸にしか見えないと思います。

ですがこの丸にアニメーションを加えてあげることによって、色を変えながら丸ではなく形を変えることができるようになります。

 

Point
animation-delayはcssの実行を遅らせるときに使う!

 

では実際にどのような変化ができるのか見ていきましょう。

 

アニメーションを実行してみると

 

Point

画像だけじゃ伝わりにくいのでサンプルページを作ってみました。

実際のアニメーションはこちらから確認してみてください。

サンプルページはこちら>>

 

先ほどの丸にアニメーションを当ててみると、以下のように変化させることができます。

 

スクリーンショット 2016-06-16 20.16.34

 

順番に少しずつ変化しているのがイメージできるでしょうか。

実際にこれらのアニメーションを見てみると、少しずつずれて再生されるアニメーションが繰り返し実行されるようになっています。

 

右に行くにつれて形が変わってるね

 

では実際にアニメーションを作成するためのコードを書いてみましょう。

 

animation-delayでアニメーションを遅らせるcss

 

今回のアニメーションはcssを使って実装します。

私が作成したコードは以下のようになっているのですが、クラス名などを変更する場合はhtmlのクラス名とcssのクラス名を合わせるようにしてください。

 

では実際のコードを確認してください。

( 解説は後述 )

 

html

<!DOCTYPE html>
<html lang="ja">

  <head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="sample.css">
  </head>

  <body>
     <div id="content">
       <div class="title">
         <h1>sample page</h2>
       </div>
<!-- ここからアニメーション -->
       <h2>アニメーション</h2>
       <div class="sample05-anim">
         <ul class="sample05-anim-list">
           <li>A</li>
           <li>B</li>
           <li>C</li>
           <li>D</li>
           <li>E</li>
           <li>F</li>
           <li>G</li>
           <li>H</li>
           <li>I</li>
         </ul>
       </div>
<!-- ここまで -->
     </div>
  </body>
</html>

 

 

htmlは、「A ~ Iまでの○」を設置しただけ!

 

続いてcssを紹介します。

アニメーションを実装する場合、htmlやphpよりもcssが重要になるので確認してください。

 

css

/*アニメーション*/

.sample05-anim {
    box-sizing: border-box;
    width: 100%;
    height: 500px;
    background-color: white;
    padding: 20px;
}

.sample05-anim-list {
    margin: 30px 0;
}

.sample05-anim-list > li {
    animation: sample05-anim 0.6s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
    width: 50px;
    height: 50px;
    margin: 0 10px;
    border: 5px solid black;
    overflow: hidden;
    float: left;
    list-style-type: none;
    background-color: yellow;
    border-radius: 35px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
}

.sample05-anim-list > li:nth-child(1) {
    animation-delay: 0;
}

.sample05-anim-list > li:nth-child(2) {
    animation-delay: 0.1s;
}

.sample05-anim-list > li:nth-child(3) {
    animation-delay: 0.2s;
}

.sample05-anim-list > li:nth-child(4) {
    animation-delay: 0.3s;
}

.sample05-anim-list > li:nth-child(5) {
    animation-delay: 0.4s;
}

.sample05-anim-list > li:nth-child(6) {
    animation-delay: 0.5s;
}

.sample05-anim-list > li:nth-child(7) {
    animation-delay: 0.6s;
}

.sample05-anim-list > li:nth-child(8) {
    animation-delay: 0.7s;
}

.sample05-anim-list > li:nth-child(9) {
    animation-delay: 0.8s;
}

@keyframes sample05-anim {
    0% {
        background-color: yellow;
        border-radius: 95px;
    }
    100% {
        background-color: red;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
}

 

今回はこのようなコードを書いてみました。

後で詳しい処理の内容を説明しますが、ざっとみると「animation: sample05-anim 0.6s cubic-bezier(0.4, 0, 1, 1) infinite alternate;」でアニメーションの実行処理や変化の方法などを設定しています。

 

 

Point
animation-delayの基本形はこんな感じ!
.a-class{ animation-delay: 0.5s; }

では詳しい解説を見ていきましょう。

 

animation-delayを理解しよう

 

今回のコードで、アニメーションを実行するために使っているコードは以下。

 

  • animation:
  • animation-delay:
  • @keyframes

 

これらを記述することでアニメーションを実装できるようになります。

では今回のコードで実装したアニメーションを例にとって見ていきましょう。

 

animation

 

アニメーションを実行する時のコードです。

Check
animation: キーフレーム名 変化の方法 繰り返す回数 再生のながれ ;

 

 

というような処理になっています。

さらに細かく、これらの4つを見ていきましょう。

 

キーフレーム名

 

後で記述する「@keyframes XXX」で指定する名前を入れることで、そのアニメーションを実行するというコードになります。

 

Check
キーフレーム名 ... 実行するアニメーションを指定

 

変化の方法

 

アニメーションの変化の仕方を指定できます。

 

スクリーンショット 2016-06-16 20.39.14

 

このように開始位置から終了位置までのアニメーションがどのように実行されるかを指定できます。

今回の場合であれば上の画像のような動きになっています。

 

Check
cubic-bezierはベジェ曲線で実行するコード。
値を自由にカスタムしたいときにオススメ

 

他にも、徐々に加速してから徐々に減速する【ease-in-out】
一定速度で実行する【linear】などがあるね

 

 

繰り返す回数

 

アニメーションを繰り返し実行する回数を指定できます。

「1」や「2」のように記述することで、「1回」「2回」とアニメーションの回数を指定できるのですが、今回のコードでは「infinite」と記述しています。

 

infiniteと指定することによって「無限」にアニメーションを繰り返すという意味になっています。

 

Point
アニメーションの回数に【infinite】を指定すると無限に繰り返す!

 

再生の流れ

 

alternateというように記述することで、アニメーションの再生が完了したら逆再生で元の位置に戻るというような命令を出すことができます。

Point
アニメーションに【alternate】を指定すると逆再生できる!

 

点灯してから消えるというような処理をする時などに「パッ」と消えるのではなく、じっくり消えるというアニメーションになります。

これらのコードは、必ずしも書き込まなければいけないというわけではありません。

 

1,2,3,4,5 と進んで
5,4,3,2,1と戻るイメージだね

 

特にアニメーションに変化をつける必要がないのであれば、以下のような短いコードだけでもアニメーションを再生することができます。

 

animation: sample05-anim 1s 1;

これは「sample05-animを1秒で1回だけ再生する」という意味になります。

 

animation-delay

 

いよいよanimation-delayの登場だね

 

animation-delayは再生するアニメーションに「遅延」処理を実装することができます。

 

今回のコードを例にとると、

  • リスト1 ... 0秒遅延(遅延なし)
  • リスト2 ... 0.1秒遅延
  • リスト3 ... 0.2秒遅延

というように0.1秒ずつ遅らせてアニメーションを再生しています。

 

animation-delayを使うことで、順番に再生されるアニメーションを実装することができました。

 

@keyframes

 

再生されるアニメーションを作成するためのコードです。

@keyframes 名前 というように作成し、先ほどのanimation: XXX 1s 1; から呼び出すことでアニメーションを再生できます。

 

Point
@keyframesでアニメーションを作る

 

keyframesを作る時は「%」で変化を指定することができ、0%から100%までの間で徐々に色を変化させたり、形を変えるなどといったアニメーションを作成しました。

今回は「0%」と「100%」のみの実装でしたが「25%」「50%」というように細かく変化をつけることもできます。

 

0%が開始値、100%が終了値だね
0%と100%のスタイルを同じにするとスムーズに繰り返しできるかも

 

ですが、アニメーションを作成する場合、ある程度まとまった流れするのがオススメ。

例えば「0%」->「10%」->「35%」->「100%」のようにしてしまうと、アニメーションの動きが一定にならなくなってしまうので、先ほど紹介した「ease」や「linear」「cubic」などを使いづらくなってしまいます。

 

ですので、細かく区切るとしても0、25、50、75、100というような法則性のある数値にしておきましょう。

これで今回紹介したコードの解説は全て完了しました。

 

CSSのアニメーションは面白いですね!

 

まとめ

 

今回の方法を使うことで、cssからアニメーションを送らせて実行を実装することができるようになりました。

ただし、ブラウザの種類によってはアニメーションに対応していないものもあるっぽいので注意してください。

 

animation-delayを使えば、cssから好きな動きにカスタマイズすることができるようになります。

ぜひ使えるようにしておきましょう。

 

 

ではまた。

過去にレビューしたアイテム