いくつかの CSS プロパティは animatable です。 animatable とは、アニメーションやトランジションに使用することができることを意味します。
Animatable プロパティは 例えばサイズ、数値、パーセントや色のようなものを、ある値から他の値に徐々に変化させることができます。
表中の数字は、完全に 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- |
背景色を赤から青にアニメーションします：
/* Code for Chrome, Safari and Opera */
@-webkit-keyframes mymove
{
from {background-color: red;}
to {background-color: blue;}
}
/* Standard syntax */
@keyframes mymove
{
from {background-color: red;}
to {background-color: blue;}
}
Try it Yourself ❯
これらのプロパティは、CSS で animatable です：