【CSS3】animationプロパティの使い方

基本
アニメーションを繰り返し再生する方法（ループ再生）
- 数値を指定した場合
- infiniteを指定した場合
アニメーションを逆再生する方法
- reverseを指定した場合
アニメーションの再生終了後の状態を設定する
- forwardsを指定した場合

基本

以下の「ここをマウスオーバー」という部分にマウスのカーソルを合わせると、5秒間かけて背景色がピンク色から青色に変化します。

See the Pen
css3animation1 by shiakisudev (@shiakisu)
on CodePen.

以下にソースを載せておきます。

HTML

<div id="sample">
  ここをマウスオーバー
</div>

CSS

#sample:hover{
animation-name: test;
animation-duration: 5s;
}
@keyframes test{
  from{
   background-color:pink; 
  }
  to {
    background-color:blue; 
  }
}

アニメーションを繰り返し再生する方法（ループ再生）

アニメーションを繰り返し再生するにはanimation-iteration-countを使用します。
初期値は1です。

指定方法	説明
数値	アニメーションを何回再生したいか、その回数を指定します。
`infinite`	停めるかウィンドウを閉じるまでアニメーションを再生し続けます。（無限ループ）

数値を指定した場合

以下の例はanimation-iteration-count:3;と指定しているため、マウスオーバーしている間、アニメーションを3回繰り返します。

See the Pen
css3anime-3kai by shiakisudev (@shiakisu)
on CodePen.

ソースは以下のとおりです。

HTML

<div id="sample">
  ここをマウスオーバー
</div>

CSS

#sample:hover{
animation-name: test;
animation-duration: 5s;
animation-iteration-count:3;
}
@keyframes test{
  from{
   background-color:pink; 
  }
  to {
    background-color:blue; 
  }
}

`infinite`を指定した場合

以下の例はanimation-iteration-count:infinite;と指定しているため、マウスオーバーしている間、アニメーションを延々と繰り返します。（無限ループ）

See the Pen
css3anime-mugen by shiakisudev (@shiakisu)
on CodePen.

ソースは以下のとおりです。

HTML

<div id="sample">
  ここをマウスオーバー
</div>

CSS

#sample:hover{
animation-name: test;
animation-duration: 5s;
animation-iteration-count:infinite;
}
@keyframes test{
  from{
   background-color:pink; 
  }
  to {
    background-color:blue; 
  }
}

アニメーションを逆再生する方法

アニメーションを繰り返し再生するにはanimation-directionを使用します。
初期値はnormalです。

指定方法	説明
`normal`	常にキーフレームの通りに再生します。（順再生）
`reverse`	常に逆再生します。
`alternate`	繰り返しの際、順再生と逆再生を交互に繰り返します。
`alternate-reverse`	繰り返しの際、逆再生と順再生を交互に繰り返します。

`reverse`を指定した場合

以下の例はanimation-direction:reverse;と指定しているため、マウスオーバーしている間、アニメーションが逆再生されます。

See the Pen
css3anime-reverse by shiakisudev (@shiakisu)
on CodePen.

ソースは以下のとおりです。

HTML

<div id="sample">
  ここをマウスオーバー
</div>

CSS

#sample:hover{
animation-name: test;
animation-duration: 5s;
animation-iteration-count:infinite;
animation-direction:reverse;
}
@keyframes test{
  from{
   background-color:pink; 
  }
  to {
    background-color:blue; 
  }
}

アニメーションの再生終了後の状態を設定する

アニメーションの再生終了後の状態を設定するには`animation-fill-modeを使用します。
初期値は1です。

div markdown=”1″ style=”overflow:auto; white-space:nowrap;”>

指定方法	説明
`forwards`	再生後は@keyframesの100%の状態（toの状態）のままになります。
`backwards`	再生後は@keyframesの0%の状態（fromの状態）のままになります。

`forwards`を指定した場合

See the Pen
anime-forwards by shiakisudev (@shiakisu)
on CodePen.

ソースは以下のとおりです。

HTML

<div id="sample">
  ここをマウスオーバー
</div>

CSS

#sample:hover{
animation-name: test;
animation-duration: 5s;
animation-fill-mode:forwards;
}
@keyframes test{
  from{
   background-color:pink;
  }
  to {
    background-color:blue;
  }
}