備忘録的プログラミングリファレンス

animation-timing-functionプロパティ

 animation-timing-functionプロパティは、CSSアニメーションの実行速度曲線を定義するプロパティです。

 steps(int,start|end)の第1引数は0以上で、第2引数を定義しない場合はendがデフォルトで設定されます。

構文(Syntax)

CSS

animation-timing-function:[ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit ];

DOM(JavaScript)

値の取得
object.style.animationTimingFunction
値の設定
object.style.animationTimingFunction="[ ease | linear | ease-in | ease-out | cubic-bezier(n, n, n, n) | initial | inherit ]"

Values

Value摘要
ease初期値(default値)で最初ゆっくり、途中が速く、最後がゆっくり
linear同じペース
ease-inゆっくり始まる
ease-outゆっくり終わる
ease-in-outゆっくり始まり、ゆっくり終わる
step-startsteps(1, start)と同じ
step-endsteps(1, end)と同じ
steps(int,start|end)実行ペースを設定、第1引数はステップ数、第2引数はステップの発生するタイミング
cubic-bezier(n, n, n, n)3次ベジェ関数で定義、値は0〜1の数値
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)ease
継承(Inherited)no
変化(Animatable)no

Example