CSS 动画

最后更新于:2022-03-27 00:00:42

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