CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 backface-visibility 属性 CSS3 アニメーション-再生-state 属性

CSS3 アニメーション-timing-function属性の使用方法及び例

CSS3 アニメーション-timing-function属性は、CSSアニメーションの各周期の持続時間中にどのように進行するかを指定します。

以下の表は、この属性の使用状況とバージョンハイストリをまとめています。

デフォルト値：	ease
適用範囲：	すべての要素::beforeと::after 仮想要素
継承：	ありません
アニメーション可能：	いいえ。参照してください：アニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文:	object　　　object.style.animationTimingFunction="linear"

アニメーション-timing-functionの使用方法

この属性の構文は以下の通りです：

アニメーション-timing-function:　linear　|　ease　|　ease-in　|　ease-out　|　ease-in-out　|　cubic-bezier(n,n,n,n)　|　initial　|　inherit

以下の例では、animationの使用方法を示しています。-timing-function属性。

例

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-アニメーション-name:　moveit;
　　　　-webkit-アニメーション-duration:　2s;
　　　　-webkit-アニメーション-timing-function:　ease-in;
　　　　
　　　　アニメーション-name:　moveit;
　　　　アニメーション-duration:　2s;
　　　　アニメーション-timing-function:　ease-in;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

テストして‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
linear	アニメーションを恒常速度で初期状態から最終状態に入れるように指定します。
ease	アニメーションが滑らかに入り出し、始めに急速に加速し、中間に減速し始めるように指定します。
ease-in	アニメーションが始めにゆっくりし、次第に加速し、最終状態に達すると突然停止するように指定します。
ease-out	アニメーションが速く始まり、最終状態に近づく際に徐々に遅くなるように指定します。
ease-in-out	アニメーションが最終状態に近づく際に徐々に始まり、加速し、減速するように指定します。
`cubic-bezier(n,n,n,n)`	三次ベ塞尔曲線を定義します。速度曲線とも呼ばれます。可能な値は0から1の間の数値。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のanimationを使用します。-timing-function属性の計算値。

ブラウザの互換性

アニメーション-timing-function属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。

	Firefox 5+ ^-moz-，15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-，15+ ^-webkit-

さらに詳しく

以下のチュートリアルを参照してください：CSS3アニメーション。

CSS3 backface-visibility 属性 CSS3 アニメーション-再生-state 属性