animation 动画效果组成
通过类似Flash动画中的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果
animation的子属性
animation-name : 主要用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画，从而执行动画。
animation-duration : 主要用来设置动画播放所需时间，一般以秒为单位
animation-timing-functoin : 主要用来设置动画的播放方式，与transition-timing-function类似
animation-delay : 主要用来指定动画开始时间，一般以秒为单位
animation-iteration-count : 主要用来指定动画播放的循环次数
animation-direction : 主要用赤指定动画的播放方向
animation-play-state : 主要用赤控制动画的播放状态
animation-fill-mode : 主要用来设置动画的时间外属性
animation 语法
1 animation : ?2 [<animation-name> || ?3 <animation-duration > || ?4 <animation-timing-functoin > || ?5 <animation-delay > || ?6 <animation-iteration-count > || ??7 <animation-direction > || ?8 <animation-play-state > || ?9 <animation-fill-mode>]10 *
关键帧
@keyframes语法
1 @keyframes IDENT{ 2 ????from { 3 ????????/* CSS 样式写在这里 */ 4 ????} 5 ?6 ????percentage { 7 ????????/* CSS 样式写在这里 */ 8 ????} 9 10 ????to {11 ????????/* CSS 样式写在这里 */12 ????}13 }其中 from 和 to 也可以换成 0% 和 100%，需要注意的是 0%的 ‘%’ 不能省略
其中IDENT就是一个动画名称，可以取一个任意定义的动画名称，当然语义化一点会更好。percentage是一个百分比值，用来定义某个时间段的动画效果，可以有多个。
animation 子属性详解
animation-name
IDENT : 是由@keyframes创建的动画名称，换句话说此处的IDENT需要和@keyframes中的IDENT一致，如果不一致则没有任何动画效果
none ：默认值，可以用于覆盖任何动画
animation-duration
用于指定动画所持续的时间，也就是完成0%到100%一次动画所需要的时间，单位为s或ms
animation-timing-function
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start： 等同于 steps(1, start)
step-end： 等同于 steps(1, end)
steps([, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-delay
用来定义动画开始播放的时间、是延迟还是提前等
animation-iteration-count
用来定义动画的播放次数
infinite : 无限循环
number : 具体次数
animation-direction
用来设置动画的播放方向
normal： 正常方向
reverse： 反方向运行
alternate： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse： 动画先反运行再正方向运行，并持续交替运行
animation-play-state
用来控制动画的播放状态
- running： 运动
- paused： 暂停
animation-fill-mode
定义动画开始之前和结束之后发生的操作
none： 默认值。不设置对象动画之外的状态
forwards： 设置对象状态为动画结束时的状态
backwards： 设置对象状态为动画开始时的状态
both： 设置对象状态为动画结束或开始的状态
CSS3动画示例
简单示例 1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ?7 ????<link rel="stylesheet" type="text/css" href="../assets/css/reset.css" /> 8 ?9 ????<style type="text/css">10 11 ????????body{12 ????????????padding: 30px;13 ????????}14 15 ????????@keyframes myfirst{16 ????????????from{17 ????????????????background-color: red;18 ????????????}19 ????????????to{20 ????????????????background-color: yellow;21 ????????????}22 ????????}23 ????????#one{24 ????????????width: 200px;25 ????????????height: 200px;26 ????????????background-color: red;27 ????????????animation: myfirst 5s;28 ????????????animation-name: myfirst;29 ????????????animation-duration: 5s;30 ????????????animation-iteration-count: infinite;31 ????????}32 ????</style>33 34 </head>35 <body>36 37 <div id="one"></div>38 39 </body>40 </html>其效果是div的颜色在红色与黄色之间不断变化
简单示例 2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ?7 ????<link rel="stylesheet" type="text/css" href="../assets/css/reset.css" /> 8 ?9 ????<style type="text/css">10 11 ????????body{12 ????????????padding: 30px;13 ????????}14 15 ????????#two-container{16 ????????????position: absolute;17 ????????????width: 800px;18 ????????????height: 30px;19 ????????????border: 1px solid red;20 ????????????overflow: hidden;21 ????????}22 23 ????????@keyframes mytwo {24 ????????????from{25 ????????????????left: -100px;26 ????????????}27 28 ????????????to{29 ????????????????left: 800px;30 ????????????}31 ????????}32 33 ????????#two{34 ????????????height: 100%;35 ????????????width: 100px;36 ????????????background: blue;37 ????????????position: relative;38 ????????????left: -100px;39 ????????????animation-name: mytwo;40 ????????????animation-duration: 5s;41 ????????????animation-iteration-count: infinite;42 ????????????animation-timing-function: linear;43 ????????}44 ????</style>45 46 </head>47 <body>48 49 50 <div id="two-container">51 ????<div id="two"></div>52 </div>53 54 </body>55 </html>KHL 005 11-计算机-本职-前台 CSS3 动画
原文地址：http://www.cnblogs.com/khlbat/p/7436009.html