css3怎么设置过渡效果花费的时间
2 回答
元芳怎么了
TA贡献1798条经验 获得超7个赞
transition的语法：
1 | transition: property duration timing-function delay; |
第二个参数就是过渡所需要的时间。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5学堂</title> <style type="text/css"> .h5course { width: 200px; height: 200px; background-color: #39f; /*3s就是过度的时间*/ -webkit-transition: height 3s ease-in; -o-transition: height 3s ease-in; transition: height 3s ease-in; } .h5course:hover { height: 500px; } </style> </head> <body> <div class="h5course">学习HTML5，到HTML5学堂</div> <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script> </body> </html> |
杨__羊羊
TA贡献1943条经验 获得超7个赞
实例
HTML Code
<div id="ts_div"></div>
CSS Code
#ts_div {
width: 300px;
height: 300px;
margin: 100px auto 0;
background-color: #000;
transition: all 1s ease;
}
#ts_div:hover {
transform: translateX(200px);
}
JS Code
var ts_div = document.getElementById("ts_div");
$("#ts_div").bind("webkitTransitionEnd", function() {
ts_div.css("transform: translateX(-400px)")
});
- 2 回答
- 0 关注
- 954 浏览
添加回答
举报
0/150
提交
取消