CSS 动画

定义和用法

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

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

 

浏览器支持

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

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

chromeiefirefoxsafariopera
4.0 -webkit-10.016.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在线课程
计算机