学CSS3的animation基础——妙味课堂

Posted 蓝色幻想728

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学CSS3的animation基础——妙味课堂相关的知识，希望对你有一定的参考价值。

终于结束了最后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>

以上是关于学CSS3的animation基础——妙味课堂的主要内容，如果未能解决你的问题，请参考以下文章

2016年5月27日上午（妙味课堂js基础-3笔记一（事件））

2016年5月27日下午（妙味课堂js基础-3笔记三（事件））

2016年5月27日下午（妙味课堂js基础-3笔记二（事件））

妙味课堂——HTML+CSS(第三课)

axios-妙味课堂

妙味课堂的导航效果