终于结束了最后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>
浙公网安备 33010602011771号