在这个夏天与Html5不期而遇（八）

一、关键帧

1、表示符：@keyframs  （0%~100%）

@keyframsNAME {

0% {

CSS样式 {color：red；}

}

.         .

.         .

.         .

}

100% {

CSS样式 {color：red；}

}

帧设计的越细，动画越逼真！与过渡相比不需要触发

2、实现动画需要的属性；

amimation-name：给动画起一个名称

animation-duration：设置动画持续周期

animation-timing-function：设置速率

函数：ease    逐渐变慢

linear    匀速

ease-in  加速

ease-out  减速

ease-in-out   先加速再减速

cubic-bizer：自定义时间曲线   （x1，y1，x2，y2）四个值   两个点  [0~1];

animation-delay：延迟

animation-iteration-count：动画的执行次数，默认一次       infinite无限次

animation-play-state： 用来控制动画播放状态  running；paused；

animation-direction：播放的方向

normal正常播放   alternate表示轮流播放，即动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放.

animation 属性是一个简写属性，定义动画的各方面:

–animation: name duration timing-function delay iteration-count direction;