CSSアニメーション
定義と使用法
いくつかのCSS特性は、それらがアニメーションやトランジションのために使用できることを意味する、アニメーション化することができます 。
アニメーション特性は徐々にそのような大きさ、数、色の割合として、別の値から変更することができます。
ブラウザのサポート
表中の数字は、メソッドのバージョン番号をサポートする最初のブラウザを表します。
数が-webkit-直後に、-moz-、または-O-が、この属性のバージョンの接頭辞をサポートする最初のブラウザを指定します。
| 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -O- |
例
背景色が次第に赤から青に変更します。
@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
»をお試しください
アニメーションのプロパティ
CSSアニメーションのプロパティ：