CSS
この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。
Cascading Style Sheets animation property.
animation
animationプロパティは、要素にキーフレームアニメーションを適用する場合に、アニメーションについてまとめて指定する際に使用します。
animationプロパティでは、
- animation-name
- アニメーション名を指定する。
- animation-duration
- アニメーション１回分の時間の長さを指定する。
- animation-timing-function
- アニメーションのタイミング・進行割合を指定する。
- animation-delay
- アニメーションがいつ始まるかを指定する。
- animation-iteration-count
- アニメーションの繰り返し回数を指定する。
- animation-direction
- アニメーションを交互に反転再生させるかどうかを指定する。
- animation-fill-mode
- アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。
- animation-play-state
- 再生中か一時停止かを指定する。
これらのプロパティの値を、組み合わせて指定することができます。省略された値はそれらの初期の値に設定されます。
- 初期値
- 一括指定の次の各プロパティとして
- animation-name : none
- animation-duration : 0s
- animation-timing-function : ease
- animation-delay : 0s
- animation-iteration-count : 1
- animation-direction : normal
- animation-fill-mode : none
- animation-play-state : running
- 適用対象
- すべての要素、::fefore / ::after 擬似要素
- 継承
- なし
Sample
HTML source
<p class="test">Animation</p>
CSS source
.test {
font-size: 3em;
animation: slideIn 2s infinite;
}
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}