CSS3のanimationのきほん

「@keyframes」でアニメーションの「名前」と動き（変化）の設定をします。

動き（変化）は、始め（0％）と終わり（100％）のプロパティを指定します。

今回は名前を「anime1（任意です）」、変化の仕方を「背景色を赤から青に変化」という指定にしました。

スタイルシートに以下のように記述します。

@keyframes anime1{
  0% {background: red;}
  100% {background: blue;}
}

次に、animationプロパティを任意のセレクタに指定します。

最低限必要な値は、先ほど作成したキーフレーム名（任意）と「アニメーション1回の秒数」です。

今回は、先ほど作成したキーフレーム名「anime1」を使い、アニメーション1回の秒数は「5秒」としました。

div {
  width: 100px;
  height: 100px;
  animation: anime1 5s;
}

今回作成した動きが以下になります。
デモ１
(1度しか再生しません。ページを再読み込みすると始めから再生します)

/*/_/_/_/_/_/_/_/_/
アニメーション
/_/_/_/_/_/_/_/_*/
div {
  width: 100px;
  height: 100px;
  animation: anime1 5s;
}

/*/_/_/_/_/_/_/_/_/
キーフレーム
/_/_/_/_/_/_/_/_*/
@keyframes anime1{
  0% {background: red;}
  100% {background: blue;}
}

今のままでは一回こっきりしか再生しないので、繰り返し再生にしてみます。

また、「●秒掛けて変化し、●秒掛けて戻る」設定もしてみましょう。

animationプロパティに次の値を付け足します。

繰り返す設定は「infinite」、

●秒掛けて変化し、●秒掛けて戻る設定は「alternate」です。

/*/_/_/_/_/_/_/_/_/
アニメーション
/_/_/_/_/_/_/_/_*/
div {
  width: 100px;
  height: 100px;
  animation: anime1 5s infinite alternate;
}

/*/_/_/_/_/_/_/_/_/
キーフレーム
/_/_/_/_/_/_/_/_*/
@keyframes anime1{
  0% {background: red;}
  100% {background: blue;}
}

上記のようにすると以下の動きになります。

デモ２

5秒掛けて変化し、5秒掛けて戻る、を繰り返します。

指定するセレクタに擬似クラス「:hover」を指定すれば、

マウスオーバーするとアニメーションするように出来ます。

(5秒じゃまどろっこしいので、変化時間を0.5秒にしました。)

/*/_/_/_/_/_/_/_/_/
アニメーション
/_/_/_/_/_/_/_/_*/
div {
  background: red;
  width: 100px;
  height: 100px;
}
div:hover { 
  animation: anime1 0.5s infinite transparent;
}

/*/_/_/_/_/_/_/_/_/
キーフレーム
/_/_/_/_/_/_/_/_*/
@keyframes anime1{
  0% {background: red;}
  100% {background: blue;}
}