今回はanimationの使い方をご紹介します。
動きのあるサイトには欠かせないanimationですが、あまり得意ではない、まだ理解できていないという方も多いのではないでしょうか。
そんな方へ少しでもお役に立てれば幸いです。

animationの使い方

animation-name：アニメーションの名前
animation-duration：アニメーションの開始から終わるまでの時間（1回分）
animation-timing-function：アニメーションの効果
animation-delay：アニメーションが開始するまでの時間
animation-iteration-count：アニメーションの繰り返し回数
animation-direction：アニメーションを逆再生
animation-fill-mode：アニメーションの開始前と終了後の状態
animation-play-state：アニメーションの再生と停止

まとめて記載
animation: 任意の名前 3s linear 0s infinite normal none running;

animation-timing-function：アニメーションの効果

アニメーションの効果には下記のようなものがあります。

・animation-timing-function:ease;
開始と完了を滑らかにします。（初期値）

・animation-timing-function:linear;
一定のままです。

・animation-timing-function:ease-in;
ゆっくり始まります。

・animation-timing-function:ease-out;
ゆっくり終わります。

・animation-timing-function:ease-in-out;
ゆっくり始まってゆっくり終わります。

animation-iteration-count：アニメーションの繰り返し回数

アニメーションの繰り返し回数の指定には下記があります。

・animation-iteration-count:infinite;
無限に繰り返す

・animation-iteration-count:数値;
再生回数を指定（初期値は1）

animation-direction：アニメーションを逆再生させるかどうか

・animation-direction:normal;
通常の再生でアニメーションサイクルを繰り返します。（初期値）

・animation-direction:alternate;
通常方向、逆方向を繰り返します。

animation-fill-mode：開始前と終了後の状態

・animation-fill-mode:none;
指定なし（初期値）

・animation-fill-mode:forwards;
アニメーションの終了時に、元の状態に戻らない。

・animation-fill-mode:backwards;
アニメーションの終了時に、元の状態に戻る。

animation-play-state：アニメーションの再生と停止

・animation-play-state:running;
再生されます。（初期値）

・animation-play-state:paused;
アニメーションが停止します。

@keyframesの使い方

@Keyframesの中に始点と終点を記述し、キーフレームを設定します。

@keyframes 任意のキーフレーム名 {
	0% {
	プロパティ: 値;
	}
	100% {
	プロパティ: 値;
	}
}

実装結果

いかがでしたでしょうか。
並べて比較するとよくわかるかと思います。
これでアニメーションを使いこなせますね！！

他にもあるよ。関連記事

• 【CSS】移動、回転、拡大・縮小などに使えるtransformプロパティ
• 【CSS】webフォントのちらつきをなくす方法
• WordPressのテーマ自作（index.php）