"CSS 参考手册"的目录
CSS 参考手册 CSS 动画
CSS 动画
定义和用法
一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。
动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。
动画属性实例
背景颜色逐渐地从红色变化到蓝色：
@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
CSS 中的动画属性：
| 属性 | 实例 |
|---|---|
| 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 | 尝试一下 》 |
| filter | 尝试一下 》 |
| 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 | 尝试一下 》 |