【CSS】animationプロパティで使用できるパラメータ

      2016/08/15


CSSアニメーションで指定できるパラメータについて、整理しました。
CSSトランジションと共通するものもありますが、逆方向再生や、再生回数など、CSSトランジションには無いパラメータもありますね。

animationプロパティで指定できるパラメータ

animationプロパティのパラメータの詳細

説明
animataion-name キーフレームに対応するアニメーション名
animation-duration 再生時間。秒数を指定する。msをつけるとミリ秒指定。
animation-timing-function アニメーションのタイミング。easeやease-in、ease-outなど幾つか指定できる。
animataion-delay アニメーションを開始させる時間。指定秒数遅らせることができる。
animation-direction normal(デフォルト)を指定すると、順方向再生。
alternateを指定すると、順方向と逆方向のアニメーションが交互に繰り返される。
animataion-iteration-count 繰り返し回数。infiniteを指定すると、無限に繰り返し再生される。

【記述例】

			animation-name: anime1;
			animation:duration: 2s;
			animation-timing-function: linear;
			animation-delay: 0s;
			animation-direction: alternate;
			animation-iteration-count: infinite;
			

animationプロパティのパラメータは、以下のようにまとめて指定できる。

			animation: anime1 2s linear alternate infinite;
			

【使用例】
animationプロパティによるアニメーションを行う。
infiniteを指定して無限に、alternateを指定して順方向逆方向交互にアニメーションさせてみる。

(CSS)
				.wrap {
					background-color: beige;
					height: 100px;
				}
				#box1  {
					height: 80px;
					animation: anime1 2s linear alternate infinite;
				} 
				@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>
			
(実行結果)

まとめ

無限に繰り返すinfiniteは使うことが多いと思います。スペルミスをしないように覚えておきたいですね。

animation-timing-functionについては、こちらに書きました。

 - css , , , ,