transition-timing-function プロパティ
transition-timing-function プロパティは、CSS アニメーションの遷移の仕方を指定するプロパティです。
指定値によって遷移の速度曲線が変わります。
transition-timing-function は、:hover や :focus といった疑似クラスによるスタイルの変更を、滑らかな CSS アニメーションにすることができる transition のプロパティです。
transition-timing-function が機能するには、CSS アニメーション化するプロパティを transition-property で指定する必要があります。
CSS アニメーションとして動作させるには、transition-duration も必要でしょう。
似たプロパティでanimationプロパティを使う方法があります。
エレメントに動きを与えますが、CSS Animationが機能するCSSプロパティのみです。
ページ内 Index
構文(Syntax)
CSS
DOM ( JavaScript )
値(Values)
Value | 摘要 |
---|---|
ease | 初期値(default値)、cubic-bezier(0.25, 0.1, 0.25, 1.0)と同値、始めと終わりを滑らかに |
linear | cubic-bezier(0.0, 0.0, 1.0, 1.0)と同値、終始同じ速度 |
ease-in | cubic-bezier(0.42, 0, 1.0, 1.0)と同値、始めをゆっくり |
ease-out | cubic-bezier(0, 0, 0.58, 1.0)と同値、終わりをゆっくり |
ease-in-out | cubic-bezier(0.42, 0, 0.58, 1.0)と同値、始めと終わりをゆっくり |
step-start | steps(1, jump-start)と同値、始めが速い |
step-end | steps(1, jump-end)と同値、終わりが速い |
steps(int,start | end) | 動く時間全体をint分割し、始めと終わりの速度を指定 |
cubic-bezier(n,n,n,n) | 動きを数値で指定する |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | ease |
継承(Inherited) | No |
CSS Animation | No |
Example
transition-timing-functionの例です。 transition-propertyで指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。
マウスをエレメントに乗せてから1秒後にCSSアニメーションが始まります。 さらに、マウスをエレメントから離すと1秒後に戻るアニメーションが始まります。
transition-timing-functionの値はease-in-outを指定しています。
transitionプロパティで一括指定する方法もあります。
関連プロパティ
以下の関連するプロパティがあります。 transition-propertyでアニメーション効果を与えるCSSプロパティを指定します。 transition-*プロパティを使ったCSSアニメーションでは以下のプロパティを使った方がよいでしょう。
transition | 以下のプロパティを一括指定 |
transition-property | 動きを与えるCSSプロパティを指定 |
transition-delay | CSSアニメーションの始まるまでの時間 |
transition-duration | CSSアニメーションの動作にかかる時間 |
transition-timing-function | CSSアニメーションの動き方 |