Categories: HTML&CSS

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

基本

以下の「ここをマウスオーバー」という部分にマウスのカーソルを合わせると、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;
  }
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp