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