CSS 可动画化
CSS 参考手册定义和用法
一些 CSS 属性是 可动画化（animatable），这意味着它们可以用于动画和过渡。
可动画化（Animatable）的属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。
浏览器支持
Internet Explorer 10、Firefox 和 Opera 支持 CSS 动画。
Safari 和 Chrome 通过带有前缀 -webkit-，支持 CSS 动画。
实例
背景颜色逐渐地从红色变化到蓝色：
@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;}
}
尝试一下 »
可动画化（Animatable）属性
在 CSS 中，下列的属性 可动画化（animatable）：
| 属性 |
|---|
| background |
| background-color |
| background-position |
| background-size |
| border |
| border-bottom |
| border-bottom-color |
| border-bottom-left-radius |
| border-bottom-right-radius |
| border-bottom-width |
| border-color |
| border-left |
| border-left-color |
| border-left-width |
| border-right |
| border-right-color |
| border-right-width |
| border-spacing |
| border-top |
| border-top-color |
| border-top-left-radius |
| border-top-right-radius |
| border-top-width |
| bottom |
| box-shadow |
| clip |
| color |
| column-count |
| column-gap |
| column-rule |
| column-rule-color |
| column-rule-width |
| column-width |
| columns |
| flex |
| flex-basis |
| flex-grow |
| flex-shrink |
| font |
| font-size |
| font-size-adjust |
| font-stretch |
| font-weight |
| height |
| left |
| letter-spacing |
| line-height |
| margin |
| margin-bottom |
| margin-left |
| margin-right |
| margin-top |
| max-height |
| max-width |
| min-height |
| min-width |
| opacity |
| order |
| outline |
| outline-color |
| outline-offset |
| outline-width |
| padding |
| padding-bottom |
| padding-left |
| padding-right |
| padding-top |
| perspective |
| perspective-origin |
| right |
| text-decoration-color |
| text-indent |
| text-shadow |
| top |
| transform |
| transform-origin |
| vertical-align |
| visibility |
| width |
| word-spacing |
| z-index |
