runoops.com

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 {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试一试 》