通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
今日课程预览
1. 关键帧
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
前面我们在使用transition制作一个简单的transition效果时，
我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，
其实这些值都是一个中间值，如果我们要控制的更细一些，
比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作
（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），
这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。
那么CSS3中就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes:
Keyframes的语法规则，
@keyframes name1{ 0%{属性名：属性值；属性名：属性值；} 29%{属性名：属性值；属性名：属性值；} 50%{属性名：属性值；属性名：属性值；} 100%{属性名：属性值；属性名：属性值；}} 我们来解释一下语法规则：
必须以@keyframes开头，后面加动画的名称，名称由自己定义，语义化最好，
后面加一对大括号，里面可以写许多个百分比，百分比后面加一对大括号，
里面写要改变的属性及属性值，用分号隔开。
此外可以用from代替0%，表示初始状态，用to代替100%，表示结束状态。即写成如下样式：
@keyframes name1{ from{属性名：属性值；属性名：属性值；} 29%{属性名：属性值；属性名：属性值；} 50%{属性名：属性值；属性名：属性值；} to{属性名：属性值；属性名：属性值；}} 2. 浏览器前缀
虽然keyframes已经成为了w3c的标准属性，但是为了兼容，
我们需要在谷歌和Safari等浏览器需加上内核前缀。
一般我们设置属性的时候一般都设置五种。
-webkit- : 内核（google chrome、safari、猎豹、360极速版） x5 ： QQ 浏览器、微信 ms ： 微软 IE 浏览器 -o-： Opera（欧朋浏览器，转入谷歌阵营了） -moz-： 火狐浏览器（netscape）3.动画 animate
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称 规定动画的时长注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
属性 描述 @keyframes 规定动画。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name 规定 @keyframes 动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 animation-timing-function 规定动画的速度曲线。默认是 “ease”。 animation-delay 规定动画何时开始。默认是 0。 animation-iteration-count 规定动画被播放的次数。默认是 1。 animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 animation-fill-mode 规定对象动画时间之外的状态。3.1 动画属性
动画名称 (animation-name) 。名称是区别事物的一种最好的办法，像每个人都有自己的名字一样，我们的动画也有自己的名称，在上面学习keyframes时，我们提到了需要自己定义帧的名字，此处的名称就是刚才我们定义帧时候取的名字，是一个必不可少的属性。
动画执行时间 (animation-duration) 。在keyframes阶段我们提到了百分比指的是动画执行时间的百分比，所以动画的持续时间也是一个必不可少的属性。单位是秒或者毫秒。
动画执行次数(animation-iteration-count) 。动画的执行时间不可能是无限的，但是我们有时候需要这个动画一直执行下去，这时我们可以定义动画的执行次数为无限次，当然你也可以定义3次、4次、5、6、7、8等等次，当然定义多少次要看你的需要。
-webkit-animation-iteration-count: 10;（无限次为infinite）
动画变换速率（animation-timing-function) 。实际上就是动画的播放方式，它和transition中的transition-timing-function一样，具有以下几种变换方式：ease , ease-in , ease-in-out , linear , cubic-bezier，cubic-bezier指的是贝塞尔曲线，稍后会讲这一部分的内容。
延迟（animation-delay） 。一个页面中可能有许多的动画，有的时候我们想有的先播放，有的后播放，那么我们怎么实现这样的效果呢。animate里面引进了一个属性叫做延迟，它规定这个动画可以在延迟制定时间后再执行。单位是秒或者毫秒。
运动方向（animation-direction） 。用来指定动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
动画的播放状态（animation-play-state） 。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。这个属性很少有内核支持，所以只是稍微提一下就好。
动画时间之外的状态(animation-fill-mode) 。我们日常经常使用的是：forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。除此之外还有三个值，分别是none：不改变默认行为。backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both：向前和向后填充模式都被应用。
3.2 样例代码
所有动画属性串联在一起的时候，属性的排列次数是
animation: 动画名称+动画执行时间+动画变换速率+延迟+动画执行次数+运动方向
.animate{ width: 100px; height: 100px; background: pink; animation: name1 4s linear 2s infinite alternate; -webkit-animation: name1 4s linear 2s infinite alternate; } @keyframes name1{ 0%{width: 100px;} 29%{width: 200px;} 50%{width: 50px;} 100%{width: 100px;} }
查看更多关于2016.3.17CSS3动画第十一天_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111426