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测试一下 》