【CSSアニメーション】@keyframesとanimationプロパティについて解説します。

なやむくん

CSSアニメーションについて知りたい

なやむさん

JavascriptやjQueryではなくてCSSでアニメーションできるようになりたい

などの疑問や悩みを解決してまいります。

JavascriptやjQueryでアニメーションを実装することが当たり前でしたが、今ではCSSだけでアニメーションが実装できるようになってきました。

今回はCSSでアニメーションを実装するための@keyframesとanimationプロパティについて解説していきます。

みつた

アニメーションを理解できればよりサイトはリッチに、制作が楽しくなりますよ！

@keyframesとは

まず@keyframesとは何か説明していきます。

@keyframesとはアニメーションの一連の動きを制御する「アットルール」と呼ばれるものです。

なやむくん

あのー、アットルールとは何でしょうか…？

みつた

「@」から始まる条件付きのルールの指定をいいます。メディアクエリで「@media~」をよく見ると思いますが、これもアットルールの1つです。

@keyframesはどのような書き方をするか見てみましょう。

@keyframes animation {
    from {
      transform: scale(0);
    }
  
    to {
        transform: scale(1);
    }
 }

@keyframesはアニメーションの動きをfrom（0%）~to（100%）で表すことができます。

上記の「from」は0%、アニメーションの開始を意味します。

また「to」は100%、アニメーションの終わりを意味します。

そして「from」の入れ子にtransform: scale(0);が指定しています。

scale() - CSS: カスケーディングスタイルシート | MDN

transform: scale(0);は要素のサイズを示すもので、scale()関数の引数には「0」が指定されているので、アニメーションの開始時には要素の大きさは0ということになります。

「to」の入れ子にtransform: scale(1);が指定しています。

つまり、アニメーションが終わるときには要素は元サイズにするという指定がされています。

これを実行すると要素のサイズを拡大させるアニメーションが開始します。

どのような動きになるかをanimationプロパティも指定しながら実際に見てみましょう。

@keyframesとanimationプロパティを使ったアニメーション作成

それでは@keyframesを使ってアニメーションを実装していくのですが、@keyframesだけではアニメーションを実装することはできません。

アニメーションに関するanimationプロパティも同時に指定していくことでアニメーションを作成することができます。

そのanimationプロパティを実際に@keyframesと併用して解説していきます。

まずは以下のコードを用意しました。

See the Pen @keyframeについて by koutarou mori (@koutarou-mori) on CodePen.

今はまだピンクの円形の要素なだけですが、ここにanimationプロパティを追加していき様々な動きを確認しつつanimationプロパティをマスターしていきましょう。

animation-nameプロパティ

@keyframesを使用するには、まず使用するアニメーションの名前を決めて、その名前をanimation-nameプロパティの値に指定して結びつける必要があります。

animation-nameプロパティをアニメーションさせたいセレクタに指定します。

今回はcircleクラスにアニメーションを設定したいので、circleクラスにanimation-nameプロパティを指定します。

今回はわかりやすく「animation」としました。

そしてアニメーションさせたい内容の@keyframesと結び付けます。

@keyframesへのanimetion-nameプロパティの設定方法は簡単で、@keyframesの記述の後にanimetion-nameプロパティに指定した名前を記述するだけで簡単に結びつけることができます。

See the Pen @keyframeについて by koutarou mori (@koutarou-mori) on CodePen.

当然ですが結び付けただけでまだアニメーションの動きの指定ができていないので、次に実際に動かしてみましょう。

animation-durationプロパティ

animation-durationプロパティはアニメーションが開始してから終了するまでの時間を指定するプロパティです。

時間を指定する際の単位は以下の通りです。

今回は円形を3秒間かけてアニメーション指定していきたいと思います。

See the Pen animetion-duration by koutarou mori (@koutarou-mori) on CodePen.

このように@keyframesで設定したアニメーションの動きを３秒間かけて実行することができました。

animation-delayプロパティ

animation-delayプロパティはアニメーションの開始時間を指定するプロパティです。

指定した時間分アニメーションの開始を遅らせて実行することができます。

今回はアニメーションの開始を３秒間遅らせて、逆に円形を縮小させるアニメーションを実行したいと思います。

See the Pen animation-delay by koutarou mori (@koutarou-mori) on CodePen.

このようにアニメーションの開始を3秒送らせて円形の縮小アニメーションができました。

しかし、縮小して見えなくなった円形の要素がアニメーション終了後に元に戻ります。

これだと少し違和感がありますので、アニメーション終了後の制御について解説していきます。

animation-fill-modeプロパティ

animation-fill-modeプロパティはアニメーションの開始前と終了後の要素の状態をどうするか指定するプロパティです。

なやむさん

どういうことでしょうか？

みつた

例えば色を赤から青に変更するアニメーションがあったとして、終了時に赤に戻すのか、それとも青のままにしておくのかを決めることができます。

指定できる値には以下のものがあります。

初期値はnoneなので、CSSはそのまま適用されず元に戻ってしまいます。

なのでアニメーションが修了した後もCSSを反映させたままにしたいので、animation-fill-mode: forwards;を指定します。

See the Pen animation-fill-mode by koutarou mori (@koutarou-mori) on CodePen.

このようにアニメーションが終了した後も、縮小されたままを維持していますね。

animation-iteration-countプロパティ

animation-iteration-countプロパティはアニメーションを繰り返す回数を指定することができます。

指定方法は以下の通りです。

今回はinfiniteを指定して無限に繰り返す動きを実装したいと思います。

See the Pen animation-iteration-count by koutarou mori (@koutarou-mori) on CodePen.

このように繰り返しアニメーションを実行させることができました。

animation-directionプロパティ

先程@keyframesの値を逆にして拡大から縮小のアニメーションを作成したのですが、animation-directionプロパティを使用して再生方向を指定することができます。

みつた

つまり順再生か逆再生にするかを指定することができます。

このプロパティを使用して、元に戻してみましょう。

See the Pen animation-direction by koutarou mori (@koutarou-mori) on CodePen.

このように拡大　⇒　縮小から縮小　⇒　拡大に変更することができました。

animation-timing-functionプロパティ

animation-timing-functionプロパティを使用することで、アニメーション途中の加速度を変更することができます。

みつた

例えば開始直後は拡大スピードを早めにして、終了近くなったら拡大スピードを緩やかにする、、、といったことが可能になります。

指定できる値は以下の通りです。

今回はease-inを使用して円形の要素の拡大を開始時は速くして、だんだんスピードを緩やかにしていきたいと思います。

See the Pen animation-timing-function by koutarou mori (@koutarou-mori) on CodePen.

このようにアニメーションの加速度を変更することができました。

animation-play-stateプロパティ

animation-play-stateプロパティはアニメーションの再生と停止を適用させることができるプロパティです。

今回は再生ボタンと停止ボタンを用意しました。

jQueryを使用して、再生ボタンをクリックしたら円形要素のcircleクラスに再生用のクラスrunクラスを付与、停止ボタンをクリックすると停止用のpausedクラスを付与するようにしています。

これでアニメーションの再生、停止を制御できるようになりました。

See the Pen animation-play-state by koutarou mori (@koutarou-mori) on CodePen.

いかがでしょうか。

animationプロパティを使用したら簡単にアニメーションの再生と停止を制御することが可能になります。

@keyframesを使用していろいろな動きをアニメーションで表現してみる

いままでは@keyframes内のルールを「from」と「to」のみでアニメーションを設定していましたが、さらに細かく、複雑にしてみましょう。

アニメーションの過程を％にして設定していきます。

以下のように@keyframesのルールを設定することもできます。

See the Pen @keyframe色々 by koutarou mori (@koutarou-mori) on CodePen.

今回はアニメーションを20％毎にCSSを指定して、動きに変化を加えています。

指定しているCSSの説明

border-radiusプロパティは要素の角を丸くするプロパティです。

border-radius - CSS: カスケーディングスタイルシート | MDN

border-radiusプロパティを20％ごとに適当な値を入れることで、角が丸くなったり、角ばったりなるようにしています。

background-colorプロパティは要素の背景色を指定するプロパティです。

background-color - CSS: カスケーディングスタイルシート | MDN

background-colorプロパティを20％ごとに違う色を指定することで、アニメーションの過程で指定した色に変化するようにできます。

transformプロパティのscale()関数に加えてrotate()関数を追加しました。

rotate()関数は要素を回転させることができる関数です。

rotate() - CSS: カスケーディングスタイルシート | MDN

rotate()関数の引数にdegという単位を用いて、正の数値と負の数値を20％ごとに指定することで要素を左に回転したり、右に回転させたりすることができます。

そこにscale()関数にも適当な数値を入れることで、大きくなったり小さくなったりさせることができます。

@keyframeとanimationプロパティのまとめ

なやむくん

animationプロパティの数が多くて覚えられるかが心配です

みつた

その場で暗記するよりも、実際にコード書いて自分で動きを確認すると頭に乗りやすいですよ！

ここまでお疲れさまでした。

今回の記事の重要なポイントのみまとめました。

@keyframesとanimationプロパティ、そしてCSSを駆使すると様々なアニメーションを作成することができますので、いろいろ試してみてください。

試しながらコードを書いているうちに覚えていきますよ！