要素にアニメーションを設定
CSSのアニメーション
要素にアニメーションを設定するには、animationプロパティと@keyframesルールを使用します。
構文
animationanimation:キーフレーム名 再生時間 イージング 遅延時間 再生回数 方向 最終位置 再生と一時停止;@keyframes@keyframes キーフレーム名 {
キーフレーム {
プロパティ:値;
}
}
指定値：animation
| 値名 | 初期値 | 説明 | サブプロパティ名 |
|---|---|---|---|
| キーフレーム名 必須 |
none | 適用する@keyframesの名前。 | animation-name |
| 再生時間 | 0s | 1回に対するアニメーションの再生時間。 単位は秒としてs、あるいはミリ秒としてmsを指定可能（ただし単位自体は必須）。 |
animation-duration |
| イージング （和らかさ） |
ease | 和らかさをを指定。 | animation-timing-function |
| 遅延時間 | 0s | アニメーションを開始するまでの時間。 単位は秒としてs、あるいはミリ秒としてmsを指定可能（ただし単位自体は必須）。 |
animation-delay |
| 再生回数 | 1 | アニメーションの再生回数。infiniteを指定することで再生回数を無限にすることが可能。 |
animation-iteration-count |
| 方向 | normal | アニメーションの方向。normalで順方向、alternateで現在の再生回数が奇数の時は順方向、偶数のときは逆方向、reverseで逆方向、alternate-reverseで現在の再生回数が奇数の時は逆方向、偶数のときは順方向となる。 |
animation-direction |
| 最終位置 | none | アニメーションが終了した後の適用するスタイルをどのキーフレームとするか。
noneで適用なし、forwardsでキーフレームの0%（from）、backwardsでキーフレームの100%（to）が適用される。ただし、animation-directionやanimation-iteration-countの値によって適用されるキーフレームの位置が逆転する。 |
animation-fill-mode |
| 再生と一時停止 | running | 指定アニメーション（キーフレーム）を再生状態にするか一時停止するか。running再生、pauseで一時停止となる。 |
animation-play-state |
- ※ IE11ではanimationプロパティにanimation-play-stateの値を含めると動作しない不具合があります。
- ※ IE11ではanimationプロパティを@mediaルール内で指定すると動作しない不具合があります。
- ※ IE11ではSVGに対してanimationプロパティを用いたアニメーションを行うことはできません。
指定値：@keyframes
| 値名 | 説明 |
|---|---|
| キーフレーム名 | @keyframesの名称。 |
| キーフレーム | 再生時間の中で変化させるタイミング。 タイミングはパーセントで指定。 なお、0%は fromキーワード、100%はtoキーワードとして指定することも可能。 |
| プロパティと値 | 変化させる（アニメーションする）プロパティとその値。 |
サンプルコード
CSS