animation-timing-function

このエントリーをはてなブックマークに追加

animation-timing-functionはkeyframesで作成したアニメーションの動きを指定できるプロパティです。

animation-timing-functionに指定できる値は次のとおりです。

ease 最初なめらかで最後ゆっくり
linear 一定速度
ease-in 最初ゆっくり
ease-out 最後ゆっくり
ease-in-out 最初ゆっくりで最後もゆっくり
animation-timing-function:ease;

これらの動きは、経過時間に対する変化の割合として定義されています。

一部のブラウザでは「-webkit-」といったベンダープレフィックスを利用して実装されていたこともあるので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。IEではIE10よりベンダープレフィックスなしで実装されています。

-webkit-animation-timing-function:ease;
animation-timing-function:ease;

CSS3のanimationはAndroid端末での不具合が多いため利用する際には注意してください。(参考:@keyframesとAndroid – to-R)

対応ブラウザ

IE Chrome 28 Safari Firefox 22 iOS Android
◯ 10〜 △ 5〜 △ 3.2〜 △ 2.1〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

4.4. The ‘animation-timing-function’ Property - W3C

登録日 : 2013年07月22日 最終更新日 : 2013年8月25日

同じカテゴリー(Animation)のエントリー

検索

スポンサードリンク

バージョン

リファレンス