标签：
终于结束了最后css3的一节课，关于animation的使用，其实之前已经用过一次。大致要了解的就是，关于如何让动画停在最后一帧的方法。视频里有提到过css3出了个新的样式可以实现，但是老师没有记住，用了个变通的方法，就是单独设置一个
.stop {left:0 !important;top:0!important;}
然后在js里将这个class赋值给元素即可。
后来我又网上找了一下，发现其实是一个叫animation-fill-mode的样式，将它的值设置为forwards，就可以实现效果。
另：关于animation还有一些疑惑，最疑惑的在于，js，jq还有css3既然都能实现动画，到底哪个性能最好呢？我还要去调查一下，以后再写吧。
<style>#wrap{width: 400px;height: 400px;border: 1px solid black;position: relative;margin: 10px auto;}#box{width: 100px;height: 100px;position: absolute;background: cornflowerblue;left: 0;top: 0;animation: 1s move linear 3 ;//3代表是动画执行3次animation-fill-mode: forwards; //也可以将forwards写在animation里作为复合样式}@keyframes move{0%{left: 0;top: 0;}25%{left: 300px;top: 0;}50%{left: 300px;top: 300px;}75%{left: 0;top: 300px;}100%{left: 0; top:0;}}</style></head><body><div id="wrap"><div id="box"></div></div></body>
标签：
原文地址：http://www.cnblogs.com/bluefantasy728/p/5631764.html
