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运行代码 》
其他扩展