在w3school上面查到一下，CSS3中的动画由animation和@keyframes 结合实现出来的。以往项目已来，一直做的是单个动画，现在讲解一下两个动画效果如何组合在一起
首先了解一下animation的所有属性 W3school是这样定义的：
[animation-name] 规定需要绑定到选择器的 keyframe 名称。。
[animation-duration] 规定完成动画所花费的时间，以秒或毫秒计。
[animation-timing-function] 规定动画的速度曲线。
[animation-delay] 规定在动画开始之前的延迟。
[animation-iteration-count] 规定动画应该播放的次数。
[animation-direction] 规定是否应该轮流反向播放动画。
然后我们用@keyframes 规则来创建两个我们要执行的动画
例如：
@keyframes Effect1{
0%{ transform:translateY(-200px); opacity:0;}
100%{ transform:translateY(0px); opacity:1; }
}
@keyframes Effect2{
0%{ margin-top:20px; }
100%{ margin-top:0px; }
}
0%表示开始时候的形式，0%表示结束时候的形式。
接下来我们把写好的两个效果捆绑在“div”元素上 ， 如下：
.div{
animation-name:Effect1, Effect2;
animation-duration:3s, 2s;
animation-timing-function:linear, linear;
animation-delay:0, 2s;
animation-iteration-count:1, infinite;
animation-fill-mode:forwards, forwards;
animation-direction:normal, alternate;
}
这样效果就完成了。
【PS】这里并没有写兼容，说一下浏览器兼容。
-webkit代表谷歌内核识别码
-o代表欧朋内核识别码
-moz代表火狐内核识别码
-ms代表ie内核识别码
这里写-webkit的兼容
.div{
animation-name:Effect1, Effect2;
animation-duration:3s, 2s;
animation-timing-function:linear, linear;
animation-delay:0, 2s;
animation-iteration-count:1, infinite;
animation-fill-mode:forwards, forwards;
animation-direction:normal, alternate;
-webkit-animation-name:Effect1, Effect2;
-webkit-animation-duration:3s, 2s;
-webkit-animation-timing-function:linear, linear;
-webkit-animation-delay:0, 2s;
-webkit-animation-iteration-count:1, infinite;
-webkit-animation-fill-mode:forwards, forwards;
-webkit-animation-direction:normal, alternate;
}
