動きをつける！？CSS Animationで使用するanimationプロパティの種類と使い方

CSS Animationプロパティの種類

CSS Animationには８つのプロパティ+まとめて指定ができるanimetionプロパティがあり、内容をしっかり理解しておく様にしましょう。
では下記リストで種類を確認してみましょう。

プロパティ名	内容	初期値
animation-name	キーフレーム使用時のアニメーション名の定義・指定	none
animation-duration	アニメーションの開始から終了までの時間を設定する	０
animation-delay	アニメーションの開始時間の指定	０
animatin-direction	アニメーションの再生方向を指定	normal
animation-timing-function	アニメーションの速度・進行度合いの変化度合い指定	ease
animation-iteration-count	アニメーションのループ回数の指定	１
animation-fill-mode	アニメーションが実行されていない時の指定	none
animation-play-state	表示時にアニメーションを再生するかor停止するかの指定	running
animation	各プロパティをまとめて指定する

CSSで動きをつける！！便利なCSSアニメーションの書き方(animation編)：初心者向け

続きを見る

各Animationプロパティの使い方

各プロパティにはアニメーションをさせる上で重要な役割があります。各プロパティの使い方をコード・結果を含めて見ていきましょう。コピペが出来る様にCODE PENを使用して書いていきます。

animation-name

animation-nameは、CSSで動きをつける！！便利なCSSアニメーションの書き方(animation編)：初心者向けにて解説したキーフレーム（@keyframes）の名前を指定するプロパティです。どのキーフレームを使用してアニメーションさせるのか指定する為だ！と覚えておきましょう。

animation-nameの書き方

• animaion-name: @keyframesにて指定した名前 ;

animation-duration

animation-durationは、アニメーションの開始から終了までの時間を設定する為に使用します。animation-durationを指定すると同じ＠keyframesを使用しても違った動きになります。下記に3秒・６秒・９秒のサンプルを表示しています。指定が変わると、どんな動きになるのか確認してみましょう。

See the Pen by MUKIRYOKU (@MUKIRYOKU) on CodePen.

animation-durationの書き方

• animation-duration: 1s（好きな時間を記載） ; ※単位は 1秒 = 1s = 1000ms になります。

animation-delay

animation-delayは、表示されてから何秒後にアニメーションをスタートさせるか指定する為のプロパティです。それぞれanimation-delayの値を変更したサンプルを表示しているので下記サンプルを確認して見てください。

See the Pen delay by MUKIRYOKU (@MUKIRYOKU) on CodePen.

animation-delayの書き方

• animation-delay: 1s ;

animation-direction

animatin-directionは、アニメーションの再生方向を指定します。再生方法とは、逆再生や通常再生の事になり、それぞれ値があります。サンプルコードの動きと合わせて確認してみてください。

• normal ・・・通常再生を繰り返す
• reverse ・・・逆再生を繰り返す
• alternate ・・・通常再生→逆再生→通常再生の順番で交互に繰り返す
• alternate-reverse ・・・逆再生→通常再生→逆再生の順番で交互に繰り返す。

See the Pen direction by MUKIRYOKU (@MUKIRYOKU) on CodePen.

animation-directionの書き方

• animation-direction: 上記リストの値；

animation-timing-function

animation-timing-functionは、アニメーションの速度・進行度合いの変化度合い指定する為に使用します。また決まった値があるので、サンプルコードの各値の動きと合わせて確認してください。

• ease ・・・開始から終了まで滑らかに
• linear ・・・開始から終了まで一定
• ease-in ・・・ゆっくり開始
• ease-out ・・・ゆっくり終了
• ease-in-out ・・・ゆっくり始まりゆっくり終了
• steps ・・・・ステップ数ごとに変化する　　※steps,step-start,step-end は、動きを覚える程度にしましょう。

See the Pen timing-function by MUKIRYOKU (@MUKIRYOKU) on CodePen.

animation-timing-functionの書き方

• animation-timing-function:　各使用したい値 ;
• animation-timing-function:　steps ( 分割したい数 , start 又は end ) ;

animation-iteration-count

animation-iteration-countは、再生先数を指定する為に使用します。先の表で記載した様に初期値が 1 なので 1 回再生されると止まります。回数は任意の回数を設定するか、infinite を使用する事で、無限ループさせる事ができます。

animation-iteration-countの書き方

• animation-iteration-count : infinite ;

animation-fill-mode

animation-fill-modeは、アニメーション開始時の状態と終了時の状態をしているするプロパティになります。数種類指定できる値があるのでリストで確認しましょう。

• none ・・・アニメーション開始前：デフォルトのスタイル・アニメーション終了後：デフォルトのスタイル
• backwards ・・・ アニメーション開始前：0%のスタイル・アニメーション終了後：0%のスタイル
• forwards・・・アニメーション開始前：デフォルトのスタイル・アニメーション終了後：100%のスタイル
• both・・・アニメーション開始前：0%のスタイル・アニメーション終了後：100%のスタイル

animation-fill-modeの書き方

• animation-fill-mode : 上記リストの値 ;

animation-play-state

animation-play-stateは、表示時に再生・停止を設定するプロパティです。基本は、初期値の running を覚えておけば問題ないですが、ホバー時に停止するしたい時など停止させる paused を使用します。

• running ・・・再生
• paused ・・・一時停止

animation-play-stateの書き方

• animation-play-state : 上記リストの値 ;

一括指定できる：Animationプロパティの書き方

８つのAnimationのプロパティを解説してきましたが、全部記載しなくても一括で指定できるのが、Animationプロパティになります。多少の順番があり、duration→delayの順を守ればお好きに記載して問題ないです。分かりやすい様に下記コードを載せておきます。

See the Pen animation by MUKIRYOKU (@MUKIRYOKU) on CodePen.

まとめ

アニメーションさせる為に必要なプロパティの理解はできたでしょうか？すぐに理解するのは難しいかと思いますので、自分でコードを書いてどの様に動くのか、どのプロパティを使えば良いかなど、トライアンドエラーを繰り返し覚えていきましょう。CSS Animationを使えば、動きをつける事で、サイトをよりリッチに出来るので、皆さんも是非取り入れて見てください。