“animation-timing-function”プロパティ:アニメーションのイージング｜CSS－havin' a coffee break

＃

概要

初期値	“animation-timing-function: ease;”
適用対象	すべての要素
継承	No
パーセント値	パーセント値は指定できません
計算値	算出された“<easing-function>”値をアイテムとするリスト
アニメーション	不可

“animation-timing-function”プロパティは“animation-name”プロパティなどで指定されたアニメーションの進捗速度をイージングによって変化させるプロパティです。

“animation-timing-function”プロパティは“@keyframes”ルールの中で使用すると特定のキーフレーム間のイージングの方法を指定することができます。アニメーションの適用対象となる要素に直接適用された“animation-timing-function”プロパティは“@keyframes”ルールの中で指示がないキーフレーム間のイージングの方法を指定します。

イージング関数の入力値は一つのキーフレームから次のキーフレームの間の経過時間です。出力される値はキーフレームの間の遷移の進捗度で、補間の際に使用されます。

“animation-delay”プロパティで指定された遅延時間中は“animation-timing-function”プロパティは適用されません。

サンプルコード



div { animation-timing-function: ease-in-out;}

＃

値

値	説明
“<easing-function>”値
linear	アニメーションは等速で進行します
cubic-bezier()	アニメーションの進捗度をベジェ曲線に沿って変化させます
ease	アニメーションは速く始まり、徐々に加速した後は最後へ向けて減速します (“cubic-bezier(0.25, 0.1, 0.25, 1)”と同じです。)
ease-in	アニメーションはゆっくり始まり、最後へ向けて加速します (“cubic-bezier(0.42, 0, 1, 1)”と同じです。)
ease-out	アニメーションは速く始まり、最後へ向けて減速します (“cubic-bezier(0, 0, 0.58, 1)”と同じです。)
ease-in-out	アニメーションはゆっくり始まり、徐々に加速し、最後はゆっくり終わります (“cubic-bezier(0.42, 0, 0.58, 1)”と同じです。)
steps()	アニメーションの進捗度を階段状に変化させます
step-start	開始とともに最後のフレームに変わり、最後までそのままです (“steps(1,start)”と同じです。)
step-end	最初のフレームが続き、終了とともに最後のフレームに変わります (“steps(1,end)”と同じです。)
他の値
共通キーワード

＃

“@keyframes”ルールの中での使用

“animation-timing-function”プロパティを“@keyframes”ルールの中で使用した場合、“animation-timing-function”プロパティの値は宣言が記述されたキーフレームからキーフレーム・セレクタを順番通りに並べ替えた時の次のキーフレームまでのイージングの方法を指定します。



@keyframes SampleAnime {


  0% {

  
      transform: translate(0);

      animation-timing-function: ease; /* “0%”から“20%”までのイージング */

    
      }

  20% {

  
      transform: translate(80px);

      animation-timing-function: steps(5,jump-both); /* “20%”から“40%”までのイージング */

  
      }

  40% {

  
      transform: translate(160px);

      animation-timing-function: ease-in-out; /* “40%”から“100%”までのイージング */

    
      }

  100% { transform: translate(300px); }


}

“@keyframes”ルールの中で“animation-timing-function”プロパティによる指定がないキーフレーム間のイージングはアニメーションの適用対象の要素に直接適用されている“animation-timing-function”プロパティの値により設定されます。



.sample-box {


animation-name: SampleAnime;

animation-duration: 5s;

animation-timing-function: linear; /* “@keyframes”で指定されていないキーフレーム間のイージング */


}





@keyframes SampleAnime {


  0% {

  
      transform: translate(0);

      animation-timing-function: ease; /* “0%”から“20%”までのイージング */

    
      }

  20% {

  
      transform: translate(80px);

      animation-timing-function: steps(5,jump-both); /* “20%”から“40%”までのイージング */

  
      }

  40% { transform: translate(160px); }

  /* “40%”から“100%”までは“linear” */

  100% { transform: translate(300px); }


}

＃

複数のアニメーションを指定する

“animation-name”プロパティで複数のアニメーションが指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれのイージングについての指定をすることができます。値の順番は“animation-name”プロパティで指定した値の順番に対応します。



div {


 animation-name: 〚1個目のアニメーション〛,〚2個目のアニメーション〛,〚3個目のアニメーション〛,...;

 animation-timing-function: 〚1個目のアニメーションのイージング〛,〚2個目のアニメーションのイージング〛,〚3個目のアニメーションのイージング〛,...;


}