要素にアニメーションを設定

CSSのアニメーション

要素にアニメーションを設定するには、animationプロパティと@keyframesルールを使用します。

構文

							animation
							animation:キーフレーム名 再生時間 イージング 遅延時間 再生回数 方向 最終位置 再生と一時停止;
							@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

デモ

sample
 
再生時間
イージング
遅延時間
再生回数
方向
最終位置
再生と一時停止

CSS3逆引きリファレンス一覧へ戻る