【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がオススメ！同僚に差をつけよう！