之前做了半年的移动端，现在又转战PC端。我是深知移动端的美好。。。这里简单的介绍一下CSS3的Animation
一.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>
网友评论