【CSS】animationプロパティ一覧

2019年6月12日CSSCSSアニメーション

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

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

プロパティ内容指定可能な値初期値
animation-nameキーフレーム名文字列none
animation-duration所要時間0s
animation-delay遅延時間0s
animation-direction繰り返しの方向normal、reverse、alternate、alternate-reversenormal
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% {}}

2019年6月12日CSSCSSアニメーション

Posted by Yousuke.U