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 {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 运行一下