クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

cssのアニメーションを遅らせて実行するanimation-delayの使い方

f:id:clrmemory:20170422175751p:plain 

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

cssのアニメーションは遅らせて実行させることもできるので紹介します。

 

 

はじめに

 

今回紹介する方法を使えば、複数の要素の実行タイミングをそれぞれ変えて実行させることができます。

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

 

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

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

 

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

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

 

では実際にどのような変化ができるのか紹介します。

 

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

 

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

 

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

 

順番に少しずつ変化しているのがわかりますでしょうか。

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

 

実際のアニメーションは以下の「サンプルページ」から確認してみてください。

サンプルページ >>

 

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

 

アニメーションを実装しよう

 

今回のアニメーションは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>

 

続いて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;」でアニメーションの実行処理や変化の方法などを設定しています。

 

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

 

コードを理解しよう

 

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

 

・animation:

・animation-delay:

・@keyframes

 

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

 

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

 

animation

 

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

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

 

というような処理になっています。これらの4つを見ていきましょう。

 

キーフレーム名


 

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

 

変化の方法


 

 

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

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

 

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

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

 

他にも「ease」や「linear」などもありますので、実装の仕方に合わせて記述してみてください。

 

繰り返す回数


 

 

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

 

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

 

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

 

再生の流れ


 

 

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

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

 

 

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

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

 

animation: sample05-anim 1s 1;

 

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

 

animation-delay

 

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

今回のコードを例にとると、1つ目のリストは遅延0秒、2つ目は遅延0.1秒、3つ目は0.2秒というように0.1秒ずつ遅らせてアニメーションを再生しています。

 

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

 

@keyframes

 

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

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

 

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

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

 

 

ですが、アニメーションを作成する場合、ある程度まとまった流れにしてください。

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

 

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

 

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

アニメーションを使えるようになりましたでしょうか。

 

まとめ

 

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

 

ただcssでアニメーションなどを使う場合、注意点があるのですが「ブラウザが対応していない」ということがあるんですよ。

対応していないブラウザではアニメーションを実行できなくなってしまいますので、注意してください。

 

アニメーションを使えば、cssから好きな動きにカスタマイズすることができるようになります。

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

 

ではまた。

新着記事