随着对html5和css3的运用普及， 页面中的简单动画 也随之常见，animation就被常用，我们运用Animation就能创建自己想要的一些动画效果了。
建议: 如果想要制作简单的不细致的动画效果 animation可以首选，比较好的动画，还是使用flash或js/jquery比较好。
一、Keyframes 关键帧
在开始介绍Animation之前我们有必要先来了解一下"Keyframes",叫做“关键帧”。 @keyframes开头，后面紧接着是这个“动画的名称”加上一对花括号"{}"
使用@keyframes规则，你可以创建动画。 创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，与0％到100％相同。
0％是开头动画，100％是当动画完成（中间可以在多次定义）。
写法 @keyframes 定义的名称{
0%(from){定义的样式，其他}
100%(to){定义的样式，其他}
}
兼容： @ -浏览器号-keyframes 定义的名称{
0%(from){定义的样式，其他}
100%(to){定义的样式，其他}
}
egg: @keyframes moves{
0% {background-position: 0 0;}
50% {background-position: -180px 0;}
100% {background-position: 0 0;}
}
二、animation的动画属性
（1）animation-name 规定需要绑定到选择器的 keyframe 名称
（2）animation-duration 规定完成动画所花费的时间，以秒或毫秒计
（3）animation-timing-function 规定动画的速度曲线。如linear直线。
（4）animation-delay 规定在动画开始之前的延迟。
（5）animation-iteration-count 规定动画应该播放的次数。 加入infinite关键字，可以让动画无限次播放。
（6）animation-direction 规定是否应该轮流反向播放动画，
（7）animation-fill-mode 动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用其属性令其为forwards。
（8）animation-play-state: 如果鼠标移走，色块立刻回到动画开始状态。如果想让动画保持突然终止时的状态，则该属性值为paused 设置动画当前状态,默认是 running ,为执行状态,可以设置为 paused 为暂停
egg: .demo{
width: 50px;
height: 50px;
background: blue;
-webkit-animation-name:'moves';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in; /*动画频率*/
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
为了方便可以简写 规格如下:
animation: name duration timing-function delay iteration-count direction play-state fill-mode;
egg: animation: moves 10s ease-in 2s 10 alternate
三、animation各属性讲解
(1)animation-name 属性为 @keyframes 动画指定名称
语法： animation-name: keyframename|none;
egg: animation-name:mymove;
-webkit-animation-name:mymove;
(2)animation-duration 设置对象动画的播放持续时间 值单位可以是秒（s）或毫秒（ms）
语法： animation-duration: time;
（3）animation-timing-function 规定动画的速度曲线 （动画播放时的运动方式）
animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：
语法：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<num1>, <num2>, <num3>, <num4>)
egg: 自定义 .demo { animation-function: cubic-bezier(0.25,0.1,0.25,1);/*自定义的贝塞尔曲线*/ }
（4）animation-delay 规定在动画开始之前的延迟（几秒后开始执行动画）。
语法：animation-delay: time;
egg: .demo {
animation-delay:2s;/*动画将于2s后执行*/
}
（5）animation-iteration-count 规定动画应该播放的次数。 加入infinite关键字，可以让动画无限次播放。
语法： animation-iteration-count: n | infinite
（6）animation-direction 规定是否应该轮流反向播放动画，
注意：如果动画被设置为只播放一次，该属性将不起作用
语法：animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
（7）animation-fill-mode 动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用其属性令其为forwards。
语法：animation-fill-mode: none | forwards | backwards | both
（8）animation-play-state: 用来控制元素动画的播放状态
语法：animation-play-state: paused | running（默认）
下面给看几个做的demo: --简单粗糙
1、人物图片 走动效果(一个走动，一个跳跃，一个高尔夫挥球)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>欢迎访问 http://www.cnblogs.com/wuchuanlong/</title> <link rel="icon" type="image/x-icon" href="images/favicon.ico" > <style> /*move_img.png上面有 几个小图 它的移动位置是100除以几 约等（=）差%，后面的移动位置即加差(间隔距离要一样) 知道总和100% 一个循环*/ body{ font-family: "Microsoft YaHei"; background-color:#9BD2FF } .elepent_mid{ margin:0 auto; width:580px; position:relative;} .move_go{ background:url(move_01.png) no-repeat; width:180px; height: 300px; position:absolute; border:1px solid red; animation:chan_run 1s step-start infinite; -moz-animation:chan_run 1s step_start infinite; -webkit-animation:chan_run 1s step_start infinite; } @keyframes chan_run{ 0% {background-position: 0 0;} 14.3% {background-position: -180px 0;} 28.6% {background-position: -360px 0;} 42.9% {background-position: -540px 0;} 57.2% {background-position: -720px 0;} 71.5% {background-position: -900px 0;} 85.8% {background-position: -1080px 0;} 100% {background-position: 0 0;} } @-moz-keyframes chan_run{ 0% {background-position: 0 0;} 14.3% {background-position: -180px 0;} 28.6% {background-position: -360px 0;} 42.9% {background-position: -540px 0;} 57.2% {background-position: -720px 0;} 71.5% {background-position: -900px 0;} 85.8% {background-position: -1080px 0;} 100% {background-position: 0 0;} } @-webket-keyframes chan_run{ 0% {background-position: 0 0;} 14.3% {background-position: -180px 0;} 28.6% {background-position: -360px 0;} 42.9% {background-position: -540px 0;} 57.2% {background-position: -720px 0;} 71.5% {background-position: -900px 0;} 85.8% {background-position: -1080px 0;} 100% {background-position: 0 0;} } /*第二个原地移动*/ .secd_yidong{ background:url(pepel_02.png) no-repeat; height:319px; width:150px; position:absolute; top:320px; animation:move_two 3s step-start infinite; -moz-animation:move_two 3s step-start infinite; -webkit-animation:move_two 3s step-start infinite; } @keyframes move_two{ 0%{ background-position:0 0;} 25%{ background-position:-150px 0} 50%{ background-position:-300px 0} 75%{ background-position:-450px 0} 100%{ background-position:0 0} } @-webkit-keyframes move_two{ 0%{ background-position:0 0;} 25%{ background-position:-150px 0} 50%{ background-position:-300px 0} 75%{ background-position:-450px 0} 100%{ background-position:0px 0} } @-moz-keyframes move_two{ 0%{ background-position:0 0;} 25%{ background-position:-150px 0} 50%{ background-position:-300px 0} 75%{ background-position:-450px 0} 100%{ background-position:0px 0} } /*第三个原地移动*/ .third_03{ background:url(jump_03.png) no-repeat; height:131px; width:61px; position:absolute; top:320px; left:240px; right:0; bottom:0; animation:move_03 1s step-start infinite; overflow:hidden; -moz-animation:move_03 1s step-start infinite; -webkit-animation:move_03 1s step-start infinite; } @keyframes move_03{ 0%{ background-position:65px 0;} 11.1%{ background-position:-65px 0} 22.2%{ background-position:-130px 0} 33.3%{ background-position:-195px 0} 44.4%{ background-position:-270px 0} 55.5%{ background-position:-335px 0;} 66.6%{ background-position:-400px 0} 77.7%{ background-position:-465px 0} 88.8%{ background-position:-530px 0} 99.9%{ background-position:-595px 0} 100%{ background-position:0 0} } @-moz-keyframes move_03{ 0%{ background-position:0 0;} 11.1%{ background-position:-65px 0} 22.2%{ background-position:-130px 0} 33.3%{ background-position:-195px 0} 44.4%{ background-position:-270px 0} 55.5%{ background-position:-335px 0;} 66.6%{ background-position:-400px 0} 77.7%{ background-position:-465px 0} 88.8%{ background-position:-530px 0} 99.9%{ background-position:-595px 0} 100%{ background-position:0 0} } @-webkit-keyframes move_03{ 0%{ background-position:0 0;} 11.1%{ background-position:-65px 0} 22.2%{ background-position:-130px 0} 33.3%{ background-position:-195px 0} 44.4%{ background-position:-270px 0} 55.5%{ background-position:-335px 0;} 66.6%{ background-position:-400px 0} 77.7%{ background-position:-465px 0} 88.8%{ background-position:-530px 0} 99.9%{ background-position:-595px 0} 100%{ background-position:0 0} } </style> </head> <body> <div class="elepent_mid"> <!--第一个--> <div class="move_go"></div> <!--第二个移动--> <div class="secd_yidong"></div> <!--第三个移动--> <div class="third_03"></div> </div> </body> </html>