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

animation-timing-function プロパティ

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

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

animation-timing-function プロパティ
div:hover{
	animation: mymove 1s forwards;
	animation-timing-function: steps(5,start);
}

@keyframes mymove {
	from {

	}
	to {
		box-shadow: 10px 10px;
	}
}

ページ内 Index

構文(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引数はステップ数、第２引数はステップの発生するタイミング
cubic-bezier(n, n, n, n)3次ベジェ関数で定義、値は0〜1の数値
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考（Remarks）

初期値（Default value）ease
継承（Inherited）no
変化（Animatable）no

Example

関連 CSS プロパティ

プロパティ概要
animationCSSアニメーションのプロパティを一括指定
animation-delay実行までの待ち時間。
animation-direction再生/逆再生の設定。
animation-durationCSS animationの実行時間。
animation-fill-mode実行時間外の動作。
animation-iteration-count再生回数。
animation-name@keyframesセレクターで定義したCSS animation名。
animation-play-state実行/停止かの設定。
animation-timing-function実行速度曲線を定義

関連（Related）