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