【CSS】アニメーションのタイミング(animation-timing-function)の比較

      2016/08/15

animation-timing-functionで、アニメーションのタイミングを指定できます。

CSSトランジションでタイミングを指定する場合は、transition-timing-functionを使用したのですが、CSSアニメーションでのタイミング指定には、このanimation-timing-functionを使用します。
といっても、プロパティ名が違うだけで、そのプロパティに指定する値は同様に、linearやease、ease-inなどを指定します。

トランジションとほとんど違いはないですが、こちらも動作サンプルを作成しました。

animation-timing-functionの使い方

animation-timing-functionに指定する値
説明
linear 一定の速度で変化(デフォルト)
ease 最初と最後がゆっくり変化する
ease-in 最初だけゆっくり変化する
ease-out 最後だけゆっくり変化する
ease-in-out 最初と最初がかなりゆっくり変化
cubic-bezier() cubic-bezier関数を使って詳細な指定をする

【使用例】1秒かけて各Boxの幅が100px~300pxに変化する。

(CSS)
		.wrap {
			background-color: beige;
			height: 300px;
		}
		.box {
			width: 100px;
			height: 50px;
			background: gold;
			border: 1px solid yellow;
		} 
		@keyframes anime1
		{
		    0%   { width: 100px; }
		    100% { width: 300px; }
		}
		#box1 { animation: anime1 2s linear alternate infinite; }
		#box2 { animation: anime1 2s ease alternate infinite; }
		#box3 { animation: anime1 2s ease-in alternate infinite; }
		#box4 { animation: anime1 2s ease-out alternate infinite; }
		#box5 { animation: anime1 2s ease-in-out alternate infinite; }
	
(HTML)
	<div class="wrap">
		<div id="box1" class="box">liner</div>
		<div id="box2" class="box">ease</div>
		<div id="box3" class="box">ease-in</div>
		<div id="box4" class="box">ease-out</div>
		<div id="box5" class="box">ease-in-out</div>
	</div>
	
(実行結果)
liner
ease
ease-in
ease-out
ease-in-out

CSSトランジションのtransiton-timing-functionプロパティと同じ使い方で問題ないですね。
逆方向再生時にも、同様のタイミングになることも確認できました。

まとめ

今回はanimation-timing-functionプロパティについて確認してみました。
予想通り、transition-timing-functionプロパティと同様の使い方で問題ありませんでした。

 - css , , , ,