在animation出来之前，动画效果需要通过js实现，但是animation的诞生可以说是css3中非常独特的属性之一
基本用法，这里用连写属性来说明
----animation:动画名 动画所需时间 动画曲线 延迟时间 动画重复次数 是否往复。
一般来说，
动画名可以随意指定，这个属于用户自定义；
动画曲线以匀速运动最为常见（linear）；
延迟时间就表示延迟多少时间执行动画；
重复次数制定1、2、3皆可，如果需要无限循环，就可以将重复次数设置为infinite；
是否往复表示规定是否轮流反向播放动画。
给某个元素绑定动画后，就需要给自己定义的动画名增加相应的效果，格式如下：
@keyframes 动画名{
from{
xxxx
}
to{
xxxx
}
}
也可以将from to写成百分比的形式，就是说，当动画时间达到制定百分比的时间时，会执行相应的动画效果。
上代码(from to形式)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
*{ padding: 0; margin: 0;}
div{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
left:0;
animation:play 10s linear 0.5s infinite alternate;
}
@keyframes play {
from{
left:0;
}
to{
left:500px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>除了以上注明的取值外，animation还增加了一个非常实用的属性，animation-play-state，默认是running，就是动画会一直跑，如果我们需要暂停动画怎么做呢？这时就可以用到它的另外一个取值------paused。
animation-play-state：paused表示立即暂停动画，一般会配套伪类选择器中的hover一起使用。
参考文献：点击打开链接
css3动画经典实例：行走的人类
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
