こんにちは。
ここ最近割と有名になってきたCSS3のアニメーション。
CSS3のアニメーションを勉強しているとanimation-nameやanimation-duration、animation-delayなど、「animation-」から始まるプロパティが多くて入門者からするとどれがどの用途なのかわかりづらいですよね。
そんな入門者の方の疑問にお答えするため、今回はanimation-durationプロパティに焦点を絞って、
について徹底解説します！
目次
animation-durationとは
animation-durationの読み方
animation-durationは「アニメーション デュレーション」と読みます。
durationは日本語で、「持続」や「期限」を意味します。
animation-durationプロパティも意味は読み通りで、アニメーションの持続時間を設定するプロパティになります。
animation-durationはアニメーションの再生時間を設定するプロパティ
animation-durationプロパティの用途を具体的にいうと、
です。
CSS3でアニメーションを実装するには、「@keyframes」で指定するキーフレームの他にアニメーションの再生時間を指定する必要があります。
animation-delayやanimation-fill-modeなどのプロパティとは違い、アニメーションを実装する際には必須で指定する必要があるプロパティになります。
animation-durationで利用できる値
では以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| 0 | アニメーションを再生しません。(初期値) |
| 単位つきの数値 | 3秒の場合は 3s を指定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
animation-durationの基本的な使い方
ここでは実際にanimation-durationプロパティを使用した簡単なアニメーションをサンプルコードと一緒に、手順ごとに解説していきます。
アニメーションさせるHTML要素、CSSを用意する
まずはアニメーションさせる元の要素を用意します。
今回は背景色が赤い円を用意します。
See the Pen
transition–1 by ryuga (@ryuga)
on CodePen.
キーフレームを用意する
次に、アニメーションの設計図となるキーフレームを設定します。
今回は円の背景色が赤色から青色に変わるキーフレームを設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.circle { width: 50px; height:50px; border-radius:50%; background-color: red; } @keyframes bgChange { from { background-color: red; } to { background-color: blue; } } |
fromはアニメーションの開始状態、toはアニメーションの終了状態を示します。
animation-nameを指定する
次に、先ほど設定したキーフレームと .circle を紐付けします。
紐付けするには、.circle にanimation-nameプロパティを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.circle { width: 50px; height:50px; border-radius:50%; background-color: red; animation-name: bgChange; } @keyframes bgChange { from { background-color: red; } to { background-color: blue; } } |
animation-durationプロパティを設定する
紐付けはできてもこれだけではアニメーションは実行されません。
アニメーションを実行するにはanimation-durationプロパティを使用して、アニメーションの再生時間を設定する必要があります。
See the Pen
animation-duration–1 by ryuga (@ryuga)
on CodePen.
今回は2秒かけて背景色を変化させるというアニメーションを実装するため、animation-durationプロパティに2sと指定しました。
そのため、ブラウザでは赤い円が2秒かけて青色になるのを確認できると思います。
このような手順を踏んで、animation-durationプロパティを設定してアニメーションを実装します。
まとめ
いかがでしょうか？
今回はanimation-durationプロパティの基本的な使い方を解説していきました。
CSS3のアニメーションはJavaScriptよりも軽量であることから、今後もさらに需要の増す技術だと考えられています。
この機会にぜひマスターして自在にCSS3のアニメーションを実装できるようにしましょう！
参考文献：http://www.htmq.com/css3/animation-duration.shtml
