スタイルanimationTimingFunctionプロパティ
例
<div>要素のanimationTimingFunctionプロパティの変更：
document.getElementById("myDIV").style.animationTimingFunction = "linear";
定義と使用法
AnimationTimingFunctionは、アニメーションの速度曲線を指定します。
速度曲線は、アニメーションがCSSスタイルのセットから別のセットに変更するために使用する時間を定義します。
速度曲線は、変更をスムーズに行うために使用されます。
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後にMozが続くと、プレフィックスで機能した最初のバージョンが指定されます。
| Property | |||||
|---|---|---|---|---|---|
| animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
構文
AnimationTimingFunctionプロパティを返します。
object.style.animationTimingFunction
AnimationTimingFunctionプロパティを設定します。
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
プロパティ値
| Value | Description |
|---|---|
| linear | The animation has the same speed from start to end |
| ease | Default value. The animation has a slow start, then fast, before it ends slowly |
| ease-in | The animation has a slow start |
| ease-out | The animation has a slow end |
| ease-in-out | The animation has both a slow start and a slow end |
| cubic-bezier(n, n, n, n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
技術的な詳細
| デフォルト値： | 簡易 |
|---|---|
| 戻り値： | 要素のanimation-timing-functionプロパティを表す文字列 |
| CSSバージョン | CSS3 |
関連ページ
CSSリファレンス：animation-timing-functionプロパティ