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 动画技术全面指南的信息别忘了在本站进行查找哦。
【深入解析：CSS3 动画技术全面指南】相关文章：
用户评论
css动画？看起来很有意思！
有15位网友表示赞同！
一直想学习做点酷炫的效果，这个应该是我要关注的东西吧。
有12位网友表示赞同！
终于有时间好好研究一下 CSS3 动画了！
有17位网友表示赞同！
想要把网页设计的更生动有趣，CSS 应该是个好工具。
有18位网友表示赞同！
从没认真接触过动画制作，看看现在学习会不会太晚？
有7位网友表示赞同！
这篇文章写的很能激发我的兴趣啊！
有13位网友表示赞同！
感觉动画可以提升用户体验，希望能学到很多新知识。
有8位网友表示赞同！
以前做网页都是简单的静态布局，现在想尝试一下动态效果。
有9位网友表示赞同！
学习一下 CSS3 动画，应该能让我更有竞争力吧！
有13位网友表示赞同！
看介绍文档还是自己动手实践更能理解动画的原理。
有19位网友表示赞同！
学习 HTML 和 CSS 都有些时间了，现在可以开始尝试做一些特效了！
有9位网友表示赞同！
这个时代，网站的设计越来越注重交互体验，CSS3 动画必不可少啊。
有8位网友表示赞同！
我的网页设计水平提升的空间很大，希望可以通过 CSS3 动画来弥补。
有7位网友表示赞同！
也许我能用动画来展示一些有趣的视觉效果，吸引用户的注意力？
有15位网友表示赞同！
学习新技能一直是我的目标，CSS3 动画很有潜力。
有15位网友表示赞同！
希望这篇文章能系统地讲解 CSS3 动画的使用方法
有20位网友表示赞同！
我很期待看到一些精彩的 CSS3 动画案例，汲取经验！
有20位网友表示赞同！
通过学习 CSS3 动画，我相信我的网页设计能力可以得到提升。
有16位网友表示赞同！
我会分享这篇文章给我的朋友，让我们一起学习吧！
有9位网友表示赞同！