您的位置：首页 > Web前端 > CSS

CSS3过渡

2016-04-22 14:54 405 查看

CSS3过渡属性

transition:property duration timing-function delay

transition-property:过渡属性的名称

transition-duration:过渡属性花费的时间

transition-timing-function:过渡效果速度曲线

transition-delay:过渡效果延迟时间

transition-property:

none没有过渡属性

all 所有的属性都过渡(默认值)

property具体属性名称

transition-duration:

秒/毫秒

transition-timing-function:

linear匀速

ease

ease-in以慢速开始

ease-out以慢速结束

ease-in-out以慢速开始和结束

cubic-bezier(n,n,n,n)(贝塞尔曲线)

工具网站： http://cubic-bezier.com

过渡完成后回调函数：

Webkit内核:

obj.addEventListener("webkitTransitionEnd",function(){})

标准:

obj.addEventListener("transitionend",function(){})

举例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
body{overflow: hidden;height:800px;}
div{position: relative;}
img{position: absolute;left:-250px;transition: 2s;}
p{width:400px;position:absolute;right:-500px;transition: 2s;}
body:hover img{left:200px;}
body:hover p{right: 300px;}
</style>
</head>
<body>
<div>
<img src = "../images/photo.jpg" width="200px"/>
<p>In the office, at home, during travel or in bed – apps for smartphones and tablets make it possible to reach users in virtually any place, time and circumstances. Our company designs intuitive and engaging mobile applications for Android, iOS and Windows Phone, providing equally great performance and user experience for each software platform. We also offer integrated web pages and administrative systems for central data bases.</p>
</div>
</body>
</html>

运行时，将鼠标悬停在页面上，效果如下：

图片和文字从两边跑到中间部分。速度曲线可以自行定义。

再举一个用过渡实现进度条的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#progress{width:0px;height: 8px;transition: all 1s linear;background: #340467;margin-bottom:10px;border-radius:5px;}
</style>
</head>
<body>
<div id="progress"></div>
<button id = "start">开始</button>
<button id = "pause">暂停</button>
<button id = "stop">停止</button>
</body>
</html>
<script>
var pro = document.querySelector("#progress");
var start = document.querySelector("#start");
var pause = document.querySelector("#pause");
var stop = document.querySelector("#stop");
start.onclick = function () {
if(pro.offsetWidth < 800){
move();
movePro(pro,move);
}else{
pro.style.width = 0;
movePro(pro,move);
}
};
pause.onclick = function () {
pausePro(pro,move);
};
stop.onclick = function () {
stopPro();
};
function move() {
if(pro.offsetWidth < 800) {
pro.style.width = pro.offsetWidth + 20 + "px";
}
else{
stopPro();
}
};
function movePro(obj, fn) {
obj.addEventListener("webkitTransitionEnd", fn );
obj.addEventListener("transitionend", fn );
}
function pausePro(obj,fn) {
obj.removeEventListener("webkitTransitionEnd", fn );
obj.removeEventListener("transitionend", fn );
}
function stopPro() {
pro.style.width = 800 + "px";

};

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航