【CSS】animationプロパティによるアニメーション

      2016/08/15


CSSトランジションで再生時間やタイミングなどの設定は可能ですが、より細かな制御がしたい時はCSSアニメーションを利用すると便利です。
CSSアニメーションの使い方について、整理しました。

animationプロパティによるアニメーション

  1. キーフレームを作る。

    キーフレームは、どのタイミングで、どういった変化をさせるか、という情報。
    アニメーションの開始時点が0%、終了時点が100%となる。
    必要に応じて、30%、50%といった途中段階のタイミングも記述できる。

    	
    					@keyframes anime1
    					{
    						0%   { width: 100px; }
    						30%  { width: 200px; }
    						100% { width: 300px; }
    					}
    				
  2. アニメーションさせる要素にanimationプロパティを指定する。
    上記で定義したアニメーション名、再生時間などを指定する。

    	
    					animation: anime1 2s infinite linear;
    				

※CSSに記述する際、①、②の順番は逆にしても問題なし。

【使用例】
キーフレームとanimationプロパティを使用して
box1の幅を25%ごとに指定する。

(CSS)
				.wrap {
					background-color: beige;
					height: 100px;
				}
				#box1  {
					height: 80px;
					animation: anime1 2s infinite linear;
				} 
				@keyframes anime1
				{
					0%   { width: 100px; }
					25%  { width: 125px; }
					50%  { width: 200px; }
					75%  { width: 225px; }
					100% { width: 300px; }
				}
			
(HTML)
				<div class="wrap">
					<img id="box1" src="img_sample1.png">
				</div>
			
(実行結果)

まとめ

キーフレームで定義したタイミングで指定した幅になるように、間を補完してアニメーションが行われているのが確認できました。
今回は、簡単なアニメーションしか行っていませんが、色の変更、変形など応用できるかと思います。
JavaScriptを使わず簡単にできるので、ぜひ使っていきたいですね。
次回は、cssアニメーションのパラメータについて書く予定です。

(追記)
cssアニメーションのパラメータについて、こちらにまとめました。

 - css , , , ,