最新のWeb開発のチュートリアル
 

Style animationTimingFunction Property

<スタイルオブジェクト

animationTimingFunctionプロパティ変更<div>要素を:

document.getElementById("myDIV").style.animationTimingFunction = "linear";
»それを自分で試してみてください

定義と使用法

animationTimingFunctionは、アニメーションの速度曲線を指定します。

速度曲線は、アニメーションが別のCSSスタイルの1セットから変更するために使用する時間を定義します。

速度曲線を滑らかに変更を加えるために使用されています。


ブラウザのサポート

表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。

MOZに続く数字は、接頭辞で働いていた最初のバージョンを指定します。

プロパティ
animationTimingFunction 43.0 サポートされていません 16.0
5.0 MOZ
サポートされていません 30.0

構文

animationTimingFunctionプロパティを返します:

object .style.animationTimingFunction

animationTimingFunctionプロパティを設定します。

object .style.animationTimingFunction="linear|ease|ease-in|ease-out|cubic-bezier( プロパティ値
説明
linear アニメーションは最初から最後まで同じ速度を持っています
ease デフォルト値。 それはゆっくり終わる前にアニメーションは、その後、速い、遅いスタートを持っています
ease-in アニメーションは、スロースタートを持っています
ease-out アニメーションは遅い端部を有し、
ease-in-out アニメーションは、スロースタート、スローエンドの両方を持っています
cubic- bezier( n , n , n , n ) 立方ベジエ機能に独自の値を定義します。
可能な値は0から1までの数値です
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

デフォルト値:
戻り値: 要素のアニメーションタイミング機能性を表す文字列、
CSSのバージョン CSS3

関連ページ

CSSリファレンス: animation-timing-function property


<スタイルオブジェクト