CSS 动画

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知识兔 》
计算机