animation

参见阮一峰老师的教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
animation是为了解决transition只能执行一次而出现的。animation是动画效果。
首先我们来看一个小例子

<style>
.heart{
    width: 20%;
    height: 20%;
    margin: 50px;
    animation: pound .5s infinite;
}
@keyframes pound{
    from{transform: none;}
    to{transform:scale(1.2);}
}
</style>
<div class="heart">
    ![](img/heart.svg)
</div>

这是一个心脏跳动的栗子，每隔0.5秒，心脏就会跳动一次。
其中，pound是给这个动画起的名字
0.5秒是动画执行的周期
infinite 默认情况下，动画只执行一次，加上infinite之后，动画可以无限播放。也可以自定义播放次数，只需将infinite变为你希望的数字次数就行
from to这里可以有多个参数，表示每执行一个周期所执行的动画
让动画保持突然终止时的状态，使用animation-play-state属性。
paused running，离开的时候暂停，再次放上后继续
动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。
alternate、reverse、alternate-reverse
动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
（1）none：默认值，回到动画没开始时的状态。
（2）backwards：让动画回到第一帧的状态。
（3）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。
keyframes关键字用来定义动画的各个状态
从一个状态到另一个状态是平滑过渡，steps函数可以实现分步过渡

div:hover {
    animation: 1s 1s rainbow linear 3 forwards normal;
}
div:hover {
    animation-name: rainbow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-fill-mode:forwards;
    animation-direction: normal;
    animation-iteration-count: 3;
}