【CSS】animationプロパティ一覧

CSSアニメーション, CSS

CSSでアニメーションを定義する時に使うanimationプロパティのメモです

個別プロパティの指定値と初期値

プロパティ 内容 指定可能な値 初期値
animation-name キーフレーム名 文字列 none
animation-duration 所要時間 0s
animation-delay 遅延時間 0s
animation-direction 繰り返しの方向 normal、reverse、alternate、alternate-reverse normal
animation-iteration-count 繰り返し設定 infiniteで繰り返し 1
animation-play-state アニメーションの状態

running、paused

running

animation-timing-function キーフレームの進み具合(イージング)

ease、ease-in、ease-out、linear、step-start、step-end

ease

animation-fill-mode アニメーション前後のスタイル 

 none・ほか、詳細

none

animationでの一括指定

個別のプロパティをまとめて指定できるanimationプロパティ

animationプロパティを使った場合も各プロパティ初期値を参照しますので指定していないものは各初期値となります

animationで一括指定する際の値の順番は、第何引数はーなどの決まりはなく実行してくれる

一般的に多くみられる順番は

「name」「duration」「timing-function」「iteration-count」

「キーフレーム名」「アニメーション時間」「イージング」「繰り返し処理」

.sample{
animation: keyName 5s ease-out infinite;
}
@keyframes keyName{0% {}100% {}}

CSSアニメーション, CSS

Posted by Yousuke.U