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(){})
举例：
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.
运行时，将鼠标悬停在页面上，效果如下：
图片和文字从两边跑到中间部分。速度曲线可以自行定义。
再举一个用过渡实现进度条的例子：
<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>
