CSSアニメーション可能
定義と使用法
一部のCSSプロパティはアニメーション化可能です。つまり、アニメーションやトランジションで使用できます。
アニメート可能なプロパティは、サイズ、数値、パーセンテージ、色など、ある値から別の値に徐々に変化する可能性があります。
ブラウザのサポート
表の数字は、CSSアニメーションを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
例
背景色を赤から青にアニメーション化します。
@keyframes mymove
{
from {background-color: red;}
to {background-color: blue;}
}
アニメート可能なプロパティ
これらのプロパティはCSSでアニメーション化できます。