2021年11月30日animationプロパティは指定できる値を見てもらうと分かりますが、transitionととても似ています。animationで指定できる値(プロパティ)は以下のとおり。animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-stateこの内、duration、timing-function、delayについては、同様のプロパティがtransitionにも存在します。animationでは、もっと細かい指定ができるというイメージでいいかと思います。キーフレームアニメーションで開始から終了までを細かく設定できます。それでは、animationの使い方を見ていきましょう。W3C公式のドキュメントはこちらから。https://drafts.csswg.org/css-animations-1/はにわまん2つに分けるCSSの書き方に最初は面食らいました...目次animationの概要アニメーションの指定の仕方について、概要から説明していきます。animationは、@keyframeとセットで使うプロパティです。animationは「設定」@keyframeは「動き」といった感じのイメージでしょうか。実際のコードを見てみましょう。class="animation"></div>animationプロパティで、アニメーションの名前や回数、時間などを指定します。@keyframesで、順番にどういった振る舞いをしていくかを指定しています。0%から100%まで刻みながら設定できるので、細かな動きを実現できるようになっています。100%;}}animationが内包する6つのプロパティの役割animetionはショートハンドプロパティと言って、backgroundやborderのように複数のプロパティを一括で指定できるようなプロパティです。冒頭でも紹介しましたが、animationで指定できるプロパティは以下のとおりです。アニメーションの再生と停止それでは1つずつ解説していきます。animation-nameアニメーションの名前を指定します。他のアニメーションと被らないように注意しましょう。animation-haniwaman;といった具合です。この名前はキーフレームを指定する際に使用します。先にどんな感じで使うかだけ実例を紹介します。100%;}}@keyframesの後ろに続くのが、animation-nameで指定した値になります。animation-duration1回分のアニメーションが開始してから終了するまでの時間を指定します。1秒)実際の動きを確認しましょう。1sで指定した場合0%から100%までのアニメーション時間が1秒になります。100%;}}5sで指定した場合0%から100%までのアニメーション時間が5秒になります。100%;}}animation-timing-functionアニメーションの振る舞い方を指定します。「始め早く終わりゆっくり」とか、「一定のスピード」などが選択できます。各値の違いを見てみようease、linear、ease-in、ease-out、ease-in-outの各値を並べてみました。開始から終了までのアニメーション時間は同じですが、動きがそれぞれ異なることが分かります。easelinearease-inease-outease-in-outanimation-delayアニメーションが開始されるまでの時間を指定します。1秒)実際の動きを確認しましょう。1sで指定した場合アニメーションが開始するまでに1秒かかります。100%;}}3sで指定した場合アニメーションが開始するまでに3秒かかります。100%;}}animation-iteration-countアニメーションの繰り返す回数を指定します。数値で再生回数を指定する(初期値は1)実際の動きを確認しましょう。3で指定した場合アニメーションが3回繰り返されます。100%;}}infiniteで指定した場合アニメーションが無限に繰り返されます。100%;}}animation-direction繰り返すたびにアニメーションの向きが変わります。0%を繰り返すといったイメージです。奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す実際の動きを確認しましょう。同じ方向に何度も繰り返されます。100%;}}alternateで指定した場合アニメーションの方向が偶数回と奇数回で変わります。100%;}}animation-fill-modeアニメーションの開始前と開始後のスタイルを指定します。forwardsとbackwardsが両方適応される実際の動きを確認しましょう。forwardsで指定した場合アニメーションの終了時に、もとに戻りません。100%;}}backwardsで指定した場合アニメーションの終了時に、もとに戻ります。100%;}}animation-play-stateアニメーションの再生と停止をコントールします。アニメーションが停止します実際の動きを確認しましょう。動いているアニメーションを停止させる無限にアニメーションしている要素を止めてみます。100%;}}animationプロパティでまとめて指定する以下の6つのプロパティをanimationで1つにまとめて指定できます。並び順は以下のとおり。running;複数のアニメーションを指定することも可能カンマで区切ることで複数のアニメーションを指定することもできます。実際にどのように変化させていくかのスタイルを指定するのが@keyframesです。わたしはanimationeプロパティは「設定」、@keyframesは「振る舞い」という捉え方をしています。@keyframesの指定の仕方について見ていきましょう。指定方法には2パターンあります。最初と最後だけ指定fromでアニメーション開始時のスタイルの指定。toでアニメーション終了時のスタイルを指定します。2種類だけなのでとてもシンプルなアニメーションとなります。100%;}}実際の指定例として以下のとおりです。100%;}}最初と最後だけの指定であればtraisitionと役割はほぼ同じですね。%で区切る0%から100%まで好きなタイミングを区切ってアニメーションを設定することができます。この柔軟性がanimationプロパティの真骨頂ではないでしょうか。複雑な動きを作ることができます。0%と100%は必須ではありません。好きな数字で作ることが可能です。100%;}}実際の指定例として以下のとおりです。100%;}}おわりanimationの使い方について、紹介しました。「薄っすら消えていく」みたいなよく使うようアニメーションは事前に作っておくといいかもしれません。影を操れ!box-shadowの使い方を分かりやすく解説しますこの記事を書いた人はにわまんWordPressが得意なWeb屋。300件以上のWordPressカスタマイズを対応してきました。移ろいゆくアニメーションを表現するCSS「transition」について解説2021年11月26日はにわまんWebコーダーWordPressが得意なWeb屋。300件以上のWordPress案件を対応してきました。