Style animationTimingFunction属性

定義と使用法

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

速度曲線は、アニメーションが一つのCSSスタイルから別のスタイルに変更される時間を定義します。

速度曲線は滑らかな変化のためです。

例

<div>要素のanimationTimingFunction属性を変更します：

document.getElementById("myDIV").style.animationTimingFunction = "linear";

実際に試してみてください

文法

animationTimingFunction属性の返り値：

object.style.animationTimingFunction

animationTimingFunction属性の設定：

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

属性値

値 説明
linear アニメーション全体の速度は一貫しています。
ease デフォルト値。アニメーションはゆっくりと始まり、速くなり、そしてゆっくりと終了します。
ease-in アニメーションがゆっくりと始まります。
ease-out アニメーションがゆっくりと終了します。
ease-in-out アニメーションは始めと終わりがゆっくりとします。
cubic-bezier(n, n, n, n)

三次ベ塞尔関数で自分自身の値を定義します。

可能な値は0から1の数値です。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的な詳細

デフォルト値： ease
返り値： 文字列で、要素の animation-timing-function 属性。
CSSバージョン： CSS3

ブラウザのサポート

animationTimingFunction CSS3（1999）の機能です。

すべてのブラウザで完全にサポートされています：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
サポート サポート サポート サポート サポート 11

関連ページ

CSS リファレンスマニュアル：animation-timing-function 属性