标签：
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>标签：
原文地址：http://blog.csdn.net/liuyan19891230/article/details/51220223
