css3动画

文章转载至：CSS参考手册

语法：

animation：<single-animation>[,<single-animation>]*

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

取值：

名称	作用
animation-name	检索或设置对象所应用的动画名称
animation-duration	检索或设置对象动画的持续时间
animation-timingfunction	检索或设置对象动画的过渡类型
animation-delay	检索或设置对象动画延迟的时间
animation-iteration-count	检索或设置对象动画的循环次数
animation-direction	检索或设置对象动画在循环中是否反向运动
animation-fill-mode	检索或设置对象动画时间之外的状态
animation-play-state	检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

兼容性：　　

例：

动画无法单独实现，需要借助关键帧(keyframes)实现

@keyframes(关键帧)作为CSS3动画的一部分，其该紧跟一个标识符(由开发者自定)，此标识符将在其他CSS代码中引用。在@keyframes和标识符之后，就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开，然后再嵌在@keyframes之后的大括号里，类似其他@语法规则。

以下面的代码为例，前缀(the vendor prefixes)webkit表示这个动画效果只适用于webkit内核的浏览器，labelON就是这个动画里面关键帧的名字(animation-name)。0%和100%表示这个动画从开始到结束。而系统会自动将开始和结束进行过度动画

<style type="text/css">
    div{
        width:100px;
        height:30px;
        border: 1px solid red;
        position:absolute;
        animation:animations 2s forwards infinite; 
    }
    @-webkit-keyframes animations{ //这里的-webkit-表示内核的限制
        0%{top:10px;left: 10px;}       //div在开始时的位置
        100%{top: 100px;left: 100px} //div在结束时的位置
    }
</style>

上述代码演示

 

 

 

属性的值：

animation-timing-function（过渡属性）

值	名称	备注
linear	线性过渡	等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease	平滑过渡	等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in	由慢到快	等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out	由快到慢	等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out	由慢到快再到慢	等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start		等同于 steps(1, start)
step-end		等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)		接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)		特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

 

animation-direction（反向运动）

值	作用
normal	正常方向
reverse	反方向运行
alternate	动画先正常运行再反方向运行，并持续交替运行
alternate-reverse	动画先反运行再正方向运行，并持续交替运行

animation-iteration-count（循环次数）

值	作用
infinite	无限循环
<number>	指定对象动画的具体循环次数