一.Animation 和 Transtion 的区别

Transtion 就像是一个过渡，它只能有开始和结束两个状态，而且必须要事件触发，且只能执行一次。

而Animation就完美解决了Transtion的不足。首先，Animation通过控制关键帧来控制动画的每一步，因此我们就可以轻松操作这个动画过程的每一帧。
另外Animation还提供了animation-iteration-count这个属性，我们可以随意控制播放的次数。

二.心跳Demo

shake.gif

这里可以看到我们的这颗心。。。。。。。算了还是直接上代码吧！

<head>
<meta charset="UTF-8">
<title>心跳Demo</title>
<style>
    #shake{
        display: inline-block;
        margin: 200px 0 0 500px;
        animation:skake 4s ease-in 0s infinite;
        -webkit-animation:shake 4s ease-in 0s infinite;
    }
    @keyframes shake{
        0%, 75%{-webkit-transform: none;transform: none}
        75%,78%{-webkit-transform: scale(1);transform: scale(1);}
        81%,84%{-webkit-transform: scale(1.2);transform: scale(1.2);}
        84%,91%{-webkit-transform: scale(1.1);transform: scale(1.1);}
        91%,90%{-webkit-transform: scale(1.4);transform: scale(1.4);}
        90%,100%{-webkit-transform: scale(1);transform: scale(1);}
    }
</style>
</head>
<body>
        <img id="shake" src="" height="80">
</body>