第4章 第5节 CSS 动画

推荐给朋友

CSS 动画

定义和用法

一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

Chrome IE Firefox Safari Opera
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 尝试一下