深入解析：CSS3 动画技术全面指南

时间：11-02 现代故事提交错误

Animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode@keyframesanimation-name指定@keyframes 的名称。当CSS加载时，将应用该名称的@keyframes规则来实现动画。

animation-duration动画时长，默认为0表示无动画，单位可设置为s秒或ms毫秒

animation-timing-function动画播放模式，默认值为ease，可以设置Linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)、steps。关于Bezier曲线和步骤，可以参考之前的文章transition，和transition-timing-function类似，就不赘述了。

animation-delay延迟开始动画的时间。默认值为0，表示不延迟，立即播放动画。单位是s秒或ms毫秒。允许设置负数时间，表示动画动作从该时间点开始，之前的动画不会显示。例如，-2s 会使动画立即开始，但会跳过动画的前2 秒。

animation-iteration-count动画循环次数。默认值为1，即播放一次后不再循环。除了数字之外，还可以设置关键字infinite，表示无限循环播放。

animation-direction动画播放方向可以设置为正常、交替或交替反向。默认值为normal，表示动画正常播放。 alternate表示正向和反向轮流播放动画，即动画以奇数（1,3,5.）正常播放，以偶数（2,4,6.）反向播放。 alternate-reverse 正好相反，奇数次反向播放动画，偶数次向前播放动画。点击此处查看效果

.myDiv1 {

宽度： 75px；

高度： 75px；

背景颜色：红色；

位置：相对；

动画：a方向5s无限；

}

@keyframes aDirection {

来自{left:0px;}

到{left:200px;}

}

.alter { 动画方向：alternate; }

.alterR { 动画方向：alternate-reverse;有什么用呢？事实上，在示例页面中可以看到alternate/alternate-reverse的动画效果可以顺利实现反转效果。例如示例页面中的flash提示。可以使用text-decoration:blink来实现闪烁，但功能有限，支持也有限。用CSS3动画实现的闪烁效果就更好了。（当然，闪烁的使用一定要克制，一定要定期确定闪烁的次数，无限制的闪烁是不允许的，无限的闪烁通常会让用户非常生气，后果很严重）：

@关键帧闪烁{

to { color: 透明} //文本颜色平滑过渡到透明

}

.眨眼{

Animation:5s 闪烁6; //触发动画6次。因为设置了交替，所以看起来闪烁了3 次。

动画方向：交替；

}animation-play-state动画的状态，可以设置为运行或暂停。默认值running表示动画正在播放，paused表示动画暂停。通常在JS端使用属性object.style.animationPlayState="paused"来暂停动画。

animation-fill-mode动画超时属性可以设置为无、向前、向后、两者。默认值none表示动画播放完后，返回初始状态。 forwards：当动画结束时，保留@keyframes中最后一帧的属性。 backs 表示开始动画时，应用@keyframes 中第一帧的属性。要看到效果，通常需要设置animation-delay延迟时间。两者都意味着同时应用前向和后向。

例如设置延迟时间为2s。最初为红色，动画的第一帧变为绿色，动画的最后一帧变为蓝色。点击此处查看效果

.myDiv2 {

宽度： 75px；

高度： 75px；

背景颜色：红色；

位置：相对；

动画：mymove 5s 1 2s;

}

@keyframes mymove {

从{left:0px;背景颜色：绿色；}

到{left:200px;背景颜色：蓝色；}

}

.forwards { 动画填充模式：forwards; }

.bkforwards { 动画填充模式：backwards; }

.both { 动画填充模式：both;图1没有解释。最正常的效果是初始为红色，动画开始时为绿色，动画结束时为蓝色，结束后又恢复到初始红色状态。图2设置为转发。与图1不同的是，动画结束后并没有回到初始状态，仍然是蓝色。图3设置为向后，在动画开始之前（即延迟期内）应用第一帧的动作。设置为绿色，动画结束后恢复原来的状态。图4设置为同时具有前进和后退的效果。

@keyframes动画帧是区分动画和过渡的关键。在转场中，无法更详细地控制该时间段内执行的动作，但在动画中，可以使用@keyframes来详细指定第一帧要做什么，第二帧要做什么。

语法：以@keyframes 开头，后跟动画名称。可以在实体内创建百分比来划分时间段。关键字from 等于0%，to 等于100%。

@keyframes mymove {

0% {top:0px;左：0px；背景：红色；}

25% {top:0px;左：100px；背景：蓝色；}

50% {top:100px;左：100px；背景：黄色；}

75% {top:100px;左：0px；背景：绿色；}

100% {top:0px;左：0px；背景：红色；}

}为了节省空间，省略了各种浏览器前缀，例如Firefox 的@-moz-keyframes、Chrome 和Safari 的@-webkit-keyframes 以及Opera 的@-o-keyframes。提醒一下，@keyframes 仅定义动画效果，但要使动画生效，必须使用animate 属性将动画绑定到特定的DOM 元素。

您可以单独指定上述子属性，也可以将它们组合起来指定在动画属性中，如背景等属性。例如animation: moveten 1s step(10,end) 无限交替向后3s;但合并时要小心，因为animation-duration和animation-delay都是时间。浏览器会按照顺序将第一次视为animation-duration，将第二次视为animation-delay。

单独指定它们可能会让代码更清晰，但是由于页面需要适配各个浏览器，如果每一个都需要加上-ms、-moz等前缀，那么代码就会变得很多，而且代码会略显冗长合并时更少。

另外，还可以同时指定多个动画效果，如animation: moveten1 1s ease .5s、moveten2 2s ease 1sforward；

深入解析：CSS3 动画技术全面指南的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、深入解析：CSS3 动画技术全面指南的信息别忘了在本站进行查找哦。