html动画时间函数,Css3 动画

逐帧动画：组成动画的每一个画面就是一个帧(也是关键帧动画，每一帧都是关键帧，没有过度帧生成部分)

关键帧动画：将动画的第一帧和最后一帧设置为关键帧，其他部分由系统完成(过度帧自动生成)。

@keyframes规则

animation属性

webkit内核的浏览器

webkit内核的浏览器需要加-webkit-前缀(safari、charme浏览器)

@-webkit-keyframes规则

-webkit-animation 属性

IE9或IE9以下浏览器不支持css3 动画

一个简单的例子：

div{

width：50px；

height：100px；

background-color：green；

}

@keyframes mybox{ //mybox 是我们为这个关键帧起的名字

from{width：50px；} //from和to 定义 开始和结尾关键帧

to{width：200px；}

}

@-webkit-keyframes mybox{ //兼容谷歌浏览器

from{width：50px；}

to{width：200px；}

}

接下来我们在div上使用hover属性来开始动画

div：hover{-webkit-animation：mybox； //使用前定义动画名称

-webkit-animation-duration：2s； //持续时间

}

使用百分比定义关键帧

@-webkit-keyframes mybox{0%{50px; height:100px;} 定义第一帧宽50px 高100px 0% 50% 100% 代表时间百分比50%{200px;height:100px;}　　　　　　　　　　　　　　　　　　定义第二帧宽200px 高100px100%{200px; heiht:200px;}　　　　　　　　　　　　　　　　　 定义第三帧宽200px 高200px 这个动画就是先变长在变高

}

div:hover{-webkit-animation:mybox;-webkit-animation-duration:2s;

}

时间函数(ease-in-out  曲线图)

animation-timing-function

-webkit-animation-timing-function

延迟时间

animation-delay

-webkit-animation-delay

动画指定的次数

animation-iteration-count：正整数|infinite(无限的)；

动画播放的方向

animation-diraction：narmal|reverse|alternate|alternate-reverse；

narmal：默认值。正常播放

reverse：动画反向播放

alternate：交替(第一次正常，第二次反向。。。。。)

alternate-reverse：第一次反向播放，第二次正常播放。

动画播放前后的状态

@-webkit-keyframes mybox{0%{transform：translate(0，200px);}50%{transform:translate(200px,0);}100%{transform:translate(200px,200px);}

}

div{

50px;

height:50px;

background-color:green;-webkit-animation-name:mybox;-webkit-animation-duration:2s;-webkit-animation-delay:2s;

}

animation-fill-mode：none|backwards|forwards|both

none：默认值，播放完成后回到原始位置

backwards：设置播放之前的元素状态和第一个关键帧相同

forwards：设置播放动画之后的元素状态和最后一个关键帧相同

both：backwards和foreards的结合

控制动画运行和暂停

animation-play-state：running|paused

running：默认值：停止或暂停的动画继续播放

paused：正在播放的动画暂停播放