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 运行范例 »

CSS 参考手册

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.