こんにちは。
CSSアニメーションを勉強しているとanimation関連のプロパティに触れるかと思います。
ですが初学者からしたら、animation-nameやanimation-delay、animation-fill-modeなど、「animation-」から始まるプロパティが多くてどれがどんな用途で使われるプロパティなのか少し混同してしまうかもしれません。
今回はそんな入門者の質問にお答えするため、この記事ではanimation関連のプロパティのなかで一番初めに触れるであろうanimation-nameプロパティに焦点を絞って解説していきます！
そこで今回は、animation-nameプロパティの
・animation-nameプロパティの応用的な使用方法
について紹介します！
目次
animation-nameとは
animation-nameの読み方
animation-nameは「アニメーション ネーム」と読みます。
プロパティの用途自体も割とシンプルで、その読み通り、CSSアニメーションの名前を指定するためのプロパティになります。
animation-nameはキーフレームを名前で指定して実行させるためのプロパティ
animation-nameの用途を具体的にいうと、
です。
CSSアニメーションを実行するには、後述する「キーフレーム」というアニメーションの設計図を記述する必要があるのですが、このanimation-nameプロパティにはその設計図の名前を指定します。
animation-nameで利用できる値
では以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| キーフレーム | アニメーションを実行させるキーフレームの名前を指定します。 |
| none | アニメーションを実行しません。(初期値) |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
animation-nameの基本的な使い方
animation-nameプロパティは単体では動作することはなく、キーフレームやそのほかのanimation関連のプロパティと併用して使用します。
今回はサンプルコードと一緒にその実装の方法を見ていきましょう。
実装例
アニメーションで動かす要素を記述する
まずはアニメーションさせるHTML要素とCSSを書いていきましょう。
See the Pen
animation-name–1 by ryuga (@ryuga)
on CodePen.
今回は赤い円にアニメーションを付けていきます。
キーフレームを記述する
次に、アニメーションの設計図となるキーフレームを記載します。
今回は背景色が変わるアニメーションを実装してみます。bgChangeという名前は任意で設定できます。
|
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; } @keyframes bgChange { from { background-color: red; } to { background-color: blue; } } |
ちなみにキーフレームは「@」から記述します。
animation-nameと関連するプロパティを記述する
これだけではアニメーションは実行しません。
最後にanimation-nameや関連するアニメーションプロパティ(animation-durationやanimation-iteration-countなど)を記述したら実装完了となります。
See the Pen
animation-name–2 by ryuga (@ryuga)
on CodePen.
animation-nameには先ほどキーフレームで指定した名前の「bgChange」を指定します。
これでbgChangeという名前のキーフレームを実行するという命令を送ることができます。
animation-nameの応用的な使い方
あまり知られていませんが、animation-nameプロパティ含め、CSSアニメーション関連のプロパティはカンマ区切りで複数指定することができます。
複雑なCSSアニメーションを実装する際に使用することがあります。
今回は以下のアニメーションをあえて別々のキーフレームに分けて実装した例を紹介します。
- 背景色を赤から青にする。
- 円の大きさを2倍にする。
See the Pen
animation-name–3 by ryuga (@ryuga)
on CodePen.
サンプルコードのように、animation-nameプロパティにカンマ区切りでキーフレームの名前を指定することで、複数のアニメーションを同時に実行することができます。
他のアニメーション関連のプロパティも同様にカンマで区切ることによって、それぞれのキーフレームに対応した値を指定することができます。
まとめ
いかがでしょうか？
今回はanimation-nameプロパティの基本的な実装の仕方からあまり知られていない応用テクニックを紹介しました。
CSSアニメーションはJavaScriptよりも軽量なため、今後もさらに普及していく技術と考えられています。
この機会に使用方法をマスターしておきましょう！！
参考文献：http://www.htmq.com/css3/animation-name.shtml
