CSS 动画

定义和用法

一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。

 

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

chrome ie firefox safari opera
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 在线运行