首页 > Web开发 > 详细

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

时间:2016-07-01 08:53:56      阅读:115      评论:0      收藏:0      [点我收藏+]

终于结束了最后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基础——妙味课堂

原文:http://www.cnblogs.com/bluefantasy728/p/5631764.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!