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

transition-timing-function プロパティ

 transition-timing-function プロパティは、CSS アニメーションの遷移の仕方を指定するプロパティです。 指定値によって遷移の速度曲線が変わります。
 transition-timing-function は、:hover や :focus といった疑似クラスによるスタイルの変更を、滑らかな CSS アニメーションにすることができる transition のプロパティです。

transition-timing-function プロパティの例
transition-property: background;
transition-timing-function: ease-in-out;
transition-duration: 5s;

詳しくは Example を参照してください

 transition-timing-function が機能するには、CSS アニメーション化するプロパティを transition-property で指定する必要があります。

 CSS アニメーションとして動作させるには、transition-duration も必要でしょう。

 似たプロパティでanimationプロパティを使う方法があります。

 エレメントに動きを与えますが、CSS Animationが機能するCSSプロパティのみです。

ページ内 Index

構文(Syntax)

CSS

transition-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 )

値の取得
String = object.style.transitionTimingFunction;
値の設定
object.style.transitionTimingFunction="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";

値(Values)

Value摘要
ease初期値(default値)、cubic-bezier(0.25, 0.1, 0.25, 1.0)と同値、始めと終わりを滑らかに
linearcubic-bezier(0.0, 0.0, 1.0, 1.0)と同値、終始同じ速度
ease-incubic-bezier(0.42, 0, 1.0, 1.0)と同値、始めをゆっくり
ease-outcubic-bezier(0, 0, 0.58, 1.0)と同値、終わりをゆっくり
ease-in-outcubic-bezier(0.42, 0, 0.58, 1.0)と同値、始めと終わりをゆっくり
step-startsteps(1, jump-start)と同値、始めが速い
step-endsteps(1, jump-end)と同値、終わりが速い
steps(int,start | end)動く時間全体をint分割し、始めと終わりの速度を指定
cubic-bezier(n,n,n,n)動きを数値で指定する
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)ease
継承(Inherited)No
CSS AnimationNo

Example

 transition-timing-functionの例です。 transition-propertyで指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。

 マウスをエレメントに乗せてから1秒後にCSSアニメーションが始まります。 さらに、マウスをエレメントから離すと1秒後に戻るアニメーションが始まります。

 transition-timing-functionの値はease-in-outを指定しています。

 transitionプロパティで一括指定する方法もあります。