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 {background-color:blue;}
}
/*Safari と Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
試してみる »
アニメーションプロパティ
CSSのアニメーションプロパティ：