[CSS] アニメーション(animation) プロパティの使い方まとめ
CSSアニメーション（ animation プロパティ）のまとめです。
基本の書き方
CSSアニメーションを使うには、まず開始(0%) ～ 終了(100%) までどのように変化するかを「キーフレーム（@keyframes）」によって定義します。
次のコードでは、要素の幅を20%→50%→100%と変化させる「changeWidth」という名前のキーフレームを定義しました。
そしてアニメーションさせたい要素（.box）にanimationプロパティを指定し、定義したキーフレームを呼び出すことでアニメーションが適用されます。
▼2秒かけて幅を20%→50%→100%に
※ マウスオーバー/タップでアニメーションを再生
<div class="box"></div>@keyframes changeWidth{
0%{
width: 20%;
}
50%{
width: 50%;
}
100%{
width: 100%;
}
}
.box{
animation: changeWidth 2s infinite;
}なお、上記の animation: changeWidth 2s infinite; というCSSは、3つのプロパティが1行にまとまっています。
- アニメーション名→
changeWidth - 1回分にかける時間→
2s(2秒) - ループ→
infinite(無限)
まとめずに書くと次のようになります。
.box{
animation-name: changeWidth; /*アニメーション名（キーフレーム名）*/
animation-duration: 2s; /*アニメーション1回分の時間の長さ*/
animation-iteration-count: infinite; /*アニメーションの繰り返し回数*/
}animationプロパティを詳しく見る
animationプロパティは8種類あります。
ここからは、これらのプロパティ1つ1つの設定例についてデモ＆サンプルコードで紹介していきます。
| プロパティ | 説明 |
|---|---|
| animation-name | アニメーション名（キーフレーム名） |
| animation-duration | アニメーション1回分の時間の長さ |
| animation-timing-function | アニメーションの進み方（イージング） |
| animation-iteration-count | アニメーションの繰り返し回数 |
| animation-delay | アニメーションの開始時間（遅延時間） |
| animation-direction | アニメーションの再生方向（順再生／逆再生） |
| animation-fill-mode | アニメーションの開始前・終了後の状態 |
| animation-play-state | アニメーションの再生・停止 |
animation-duration
アニメーション1回分の時間の長さを指定するプロパティです。
初期値：0s
▼1秒かけてアニメーション
▼3秒かけてアニメーション
▼10秒かけてアニメーション
※ マウスオーバー/タップでアニメーションを再生
<div class="box duration-1s">1s</div>
<div class="box duration-3s">3s</div>
<div class="box duration-10s">10s</div>@keyframes changeWidth{
0%{
width: 30%;
}
100%{
width: 100%;
}
}
.duration-1s{
animation-duration: 1s;
/* その他指定(以下略)
animation-name: changeWidth;
animation-fill-mode: forwards;
*/
}
.duration-3s{
animation-duration: 3s;
}
.duration-10s{
animation-duration: 10s;
}animation-timing-function
アニメーションの進み方（イージング）を指定します。
初期値：ease
▼開始と終了を滑らかに
▼一定の速度で
▼開始をゆっくり
▼終了をゆっくり
▼開始と終了をゆっくり
※ マウスオーバー/タップでアニメーションを再生
<div class="box easing-ease">ease</div>
<div class="box easing-linear">linear</div>
<div class="box easing-easein">ease-in</div>
<div class="box easing-easeout">ease-out</div>
<div class="box easing-easeinout">ease-in-out</div>@keyframes changeWidth{
0%{
width: 30%;
}
100%{
width: 100%;
}
}
.easing-ease{
animation-timing-function: ease;
/* その他指定(以下略)
animation-name: changeWidth;
animation-duration: 1.5s;
animation-fill-mode: forwards;
*/
}
.easing-linear{
animation-timing-function: linear;
}
.easing-easein{
animation-timing-function: ease-in;
}
.easing-easeout{
animation-timing-function: ease-out;
}
.easing-easeinout{
animation-timing-function: ease-in-out;
}animation-iteration-count
アニメーションの繰り返し回数を指定します。
初期値: 1
▼1回のみ
▼3回リピート
▼無限リピート
※ マウスオーバー/タップでアニメーションを再生
<div class="box loop-1">1</div>
<div class="box loop-3">3</div>
<div class="box loop-infinite">infinite</div>@keyframes changeWidth{
0%{
width: 30%;
}
100%{
width: 100%;
}
}
.loop-1{
animation-iteration-count: 1;
/* その他指定(以下略)
animation-name: changeWidth;
animation-duration: 1.5s;
animation-fill-mode: forwards;
*/
}
.loop-3{
animation-iteration-count: 3;
}
.loop-infinite{
animation-iteration-count: infinite;
}animation-delay
アニメーションの開始時間（遅延時間）を指定します。
初期値：0s
▼すぐに開始
▼2秒後に開始
※ マウスオーバー/タップでアニメーションを再生
<div class="box delay-0s">0s</div>
<div class="box delay-2s">2s</div>@keyframes changeWidth{
0%{
width: 30%;
}
100%{
width: 100%;
}
}
.delay-0s{
animation-delay: 0s;
/* その他指定(以下略)
animation-name: changeWidth;
animation-duration: 1.5s;
animation-fill-mode: forwards;
*/
}
.delay-2s{
animation-delay: 2s;
}animation-direction
アニメーションの「開始時」と「ループ時」に、どの方向から再生するか（順再生／逆再生）を指定します。
初期値：normal
▼開始時：順再生 ／ ループ時：順再生
▼開始時：順再生 ／ ループ時：逆再生⇔ 順再生
▼開始時：逆再生 ／ ループ時：逆再生
▼開始時：逆再生 ／ ループ時：順再生⇔ 逆再生
※ マウスオーバー/タップでアニメーションを再生
<div class="box direction-normal">normal</div>
<div class="box direction-alternate">alternate</div>
<div class="box direction-reverse">reverse</div>
<div class="box direction-alternatereverse">alternate-reverse</div>@keyframes changeWidth{
0%{
width: 30%;
}
100%{
width: 100%;
}
}
.direction-normal{
animation-direction: normal;
/* その他指定(以下略)
animation-name: changeWidth;
animation-duration: 2s;
animation-iteration-count: 5;
animation-fill-mode: forwards;
*/
}
.direction-alternate{
animation-direction: alternate;
}
.direction-reverse{
animation-direction: reverse;
}
.direction-alternatereverse{
animation-direction: alternate-reverse;
}animation-fill-mode
アニメーションの「開始前」「終了後」の状態を指定します。
- 開始前：ベーススタイル or キーフレームが0%のときのスタイル
- 終了後：ベーススタイル or キーフレームが100%のときのスタイル
「ベーススタイル」というのは、キーフレームによる変化が何も適用されていない状態を指します（animation 以外のCSSが適用された状態）。
以下のデモでは、.box の幅 50%、背景色 グレー を状態をベーススタイルとします。
初期値：none
※「開始前」の状態がわかりやすいよう、2秒後にアニメーションを開始します。
▼開始前：ベーススタイル ／ 終了後：ベーススタイル
▼開始前：ベーススタイル ／ 終了後：キーフレーム100%
▼開始前：キーフレーム0% ／ 終了後：ベーススタイル
▼開始前：キーフレーム0% ／ 終了後：キーフレーム100%
※ マウスオーバー/タップでアニメーションを再生
<div class="box fillmode-none">none</div>
<div class="box fillmode-forwards">forwards</div>
<div class="box fillmode-backwards">backwards</div>
<div class="box fillmode-both">both</div>@keyframes changeWidth{
0%{
width: 30%;
background-color: #94a3b8;/* ネイビー */
}
100%{
width: 100%;
background-color: #94a3b8;/* ネイビー */
}
}
.box{/* ベーススタイル(抜粋) */
width: 50%;
background-color: #ddd;/* グレー */
}
.fillmode-none{
animation-fill-mode: none;
/* その他指定(以下略)
animation-name: changeWidth;
animation-duration: 1.5s;
animation-delay: 2s;
*/
}
.fillmode-forwards{
animation-fill-mode: forwards;
}
.fillmode-backwards{
animation-fill-mode: backwards;
}
.fillmode-both{
animation-fill-mode: both;
}animation-play-state
アニメーションの再生・停止を指定します。
初期値：running
▼再生
▼停止
▼マウスオーバーで一時停止／マウスアウトで停止位置から再生
<div class="box playstate-running">running</div>
<div class="box playstate-paused">paused</div>
<div class="box playstate-paused--hover">paused(hover)</div>@keyframes changeWidth{
0%{
width: 30%;
}
100%{
width: 100%;
}
}
.playstate-running{
animation-play-state: running;
/* その他指定(以下略)
animation-name: changeWidth;
animation-duration: 1.5s;
animation-iteration-count: infinite;
*/
}
.playstate-paused{
animation-play-state: paused;
}
.playstate-paused--hover:hover{
animation-play-state: paused;
}