animation-timing-function リダイレクト 1

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

animation-timing-function CSS プロパティは、それぞれのアニメーション周期でどのような CSS アニメーションを実行するかを指定します。指定できる値は、1 つまたは複数の <タイミング関数> です。

キーフレームによるアニメーションでは、timing-function はアニメーション全体ではなくキーフレーム間に適用されます。言い換えると、timing-function はキーフレームの始まりから終わりまでの間に適用されます。

キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。

アニメーション関連のプロパティをまとめて設定できる短縮プロパティである animation プロパティを使用すると便利でしょう。

構文

Formal grammar: <timing-function> [, <timing-function>]*
animation-timing-function: ease
animation-timing-function: ease-in
animation-timing-function: ease-out
animation-timing-function: ease-in-out
animation-timing-function: linear
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
animation-timing-function: step-start
animation-timing-function: step-stop
animation-timing-function: steps(4, end)

animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)

<タイミング関数> は、animation-property で指定されたアニメーションのプロパティに対応するタイミング関数を表します。

例示

CSS アニメーションの頁を参照してください。

<timing-function>
各々の <タイミング関数> は、animation-property で指定されたアニメーションのプロパティに対応するタイミング関数を表します。

仕様

仕様書 策定状況 コメント
CSS Animations Level 3 草案  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) -webkit 5.0 (5.0) -moz
16.0 (16.0)
10 12 -o
12.5 #
4.0-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (有) -webkit 5.0 (5.0) -moz
16.0 (16.0)
? ? ?

関連情報

ドキュメントのタグと貢献者

最終更新者: ethertank,
サイドバーを隠す