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 中的动画属性：

属性	实例
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	尝试一下》