CSS3 animation

animation

• 浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

 

• 定义和用法

• animation-name       指定要绑定到选择器的关键帧的名称 ，为 @Keyframes创建的动画名

• animation-duration   用来指定元素播放动画所持续的时间长　

• animation-timing-function :  设置动画将如何完成一个周期，和transition中的transition-timing-function一样，具有以下六种变换方式

ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier：特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效

• animation-delay   :  设置动画在启动前的延迟间隔。默认0

• animation-iteration-count   :  是用来指定元素播放动画的循环次数

可以取值<number>为数字，其默认值为 1

infinite为无限次数循环

• animation-direction : normal | alternate 

默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；

alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

• animation-fill-mode : none | forwards | backwards | both

说明：属性规定动画在播放之前或之后，其动画效果是否可见

注释：其属性值是由逗号分隔的一个或多个填充模式关键词

javaScript语法：object.style.animationFillMode=none

参数：

none 不改变默认行为。

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both 向前和向后填充模式都被应用。

• animation-play-state :running | paused

running为默认值 ,通过running将暂停的动画重新播放

通过paused将正在播放的动画停下了

　　

• 简写

animation: name duration timing-function delay iteration-count direction;
animation: name 2000; ( 省略 timing-function ,delay ,iteration-count ,direction)

 

@keyframes 规则

　　要创建CSS3动画，你将不得不了解@keyframes规则。

　　@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

　　

实例：

@keyframes myfirst
{
　　from {background: red;}
　　to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
　　from {background: red;}
　　to {background: yellow;}
}

 

@keyframes myfirst2
{
　　0% {background: red; left:0px; top:0px;}
　　25% {background: yellow; left:200px; top:0px;}
　　50% {background: blue; left:200px; top:200px;}
　　75% {background: green; left:0px; top:200px;}
　　100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst2 /* Safari 与 Chrome */
{
　　0% {background: red; left:0px; top:0px;}
　　25% {background: yellow; left:200px; top:0px;}
　　50% {background: blue; left:200px; top:200px;}
　　75% {background: green; left:0px; top:200px;}
　　100% {background: red; left:0px; top:0px;}
}

 

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div {

　　animation: myfirst 5s;

　　-webkit-animation: myfirst 5s; /* Safari 与 Chrome */

}

div > div { 

　　animation: myfirst2 5s;

　　-webkit-animation: myfirst2 5s; /* Safari 与 Chrome */ 

}