css3 transition

现在的位置: 首页 > 综合 > 正文

2013年09月06日 ⁄ 综合 ⁄ 共 9243字 ⁄ 字号小中大 ⁄ 评论关闭

Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们必须要加上各自的私有属性前缀。Firefox（-moz-）,opera（-o-）,Safari/chrome（-webkit-）。

transition具体包含4个属性值，分别是transition-property（变换的属性）, transition-duration（持续时间）, transition-timing-function（动画效果）, transition-delay（延迟时间）

书写顺序——transition:transition-property, transition-duration, transition-timing-function, transition-delay

transition-property——用于检索或设置对象中的参与变换的属性
属性值有3类

transition-property：all; 表示所有可以进行变换的css属性,也是transition-property属性的默认值
transition-property：none; 不指定变换的css属性,当属性值为none时，动画立即停止
transition-property：某一具体的属性值; 如color,写法：transition-property:color 表示具体要进行变换的css属性

transition-duration——指定对象变换的持续时间,也可以理解为整个过程需要的时间,常用单位为秒（s）和毫秒（ms）, 默认值为0

transition-timing-function——检索或设置对象中变换的动画类型
属性值有6种

linear：线性变换。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)(点击了解什么是贝赛尔曲线)
ease：平滑变换。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). ease也是transition-timing-function属性的默认值
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

查看动画效果demo

transition-delay——指定对象变换的延迟时间,常用单位为秒（s）和毫秒（ms）, 默认值为0

以上4种属性，当单个属性有多个值存在时，用逗号进行分割，如：
transition-timing-function:ease,ease-in,ease-out;

属性简写——例：
-webkit-transition:background-color 2s ease 0,color 3s ease 0;
-moz-transition:background-color 2s ease 0,color 3s ease 0;
-o-transition:background-color 2s ease 0,color 3s ease 0;
transition:background-color 2s ease 0,color 3s ease 0;
目前还需要添加不同的前缀以便不同浏览器的支持

接下来详细看看transition-timing-function的值，ease,ease-on,ease-out,ease-in-out,还有自定义变化曲线的cubic-bezier(number,number,number,number)，cubic-bezier是指贝塞尔曲线，估计很多看到这个都很头疼，这里简单说明下。

ease
相当于 cubic-bezier(0.25, 0.1, 0.25, 1.0).简单说就是平均变化，速度一样。

ease-in
相当于 cubic-bezier(0.42, 0, 1.0, 1.0).先慢后快的变化，好像是猛踩油门然后换换刹车。

ease-out
相当于 cubic-bezier(0, 0, 0.58, 1.0).和ease-out相反，先快后慢的变化。

ease-in-out
相当于 cubic-bezier(0.42, 0, 0.58, 1.0).启动慢中间快收尾慢的变化，好像是老师傅开老爷车，要慢慢加速，慢慢刹车。

linear
相当于 cubic-bezier(0.0, 0.0, 1.0, 1.0).和ease-in-out相反，启动和收尾快，中间慢。

cubic-bezier
自定义一个 cubic-bezier 曲线. 根据需要定义 (x1, y1, x2, y2) 的数值. 所有数值要在 [0, 1] 范围内。如果不是要用transition完成一个很复杂的动画，基本上不会用到自定义的情况，搞清楚上面5种，已经能让你用起来得心应手了！

.trans {

-webkit-transition-property:
background-color;指定过渡的性质

-webkit-transition-duration:
0.3s;指定这个过渡的持续时间

-webkit-transition-timing-function:
ease;指定过渡类型

}

.trans:hover
{

background-color:
#486AAA;

color:
#fff;

}

web2.0 touch

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
	<title>Web 2.0 Touch</title>
    <meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no; width=device-width;" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />	
	<link rel="apple-touch-startup-image" href="images/iphone_startup.png" />
	<link rel="apple-touch-icon" href="images/iphone_icon.png" />
	<script type="text/javascript" src="includes/jquery.js"></script>
<style>
div{width:320px; height:400px;}
.bd1{border:1px solid #936}
</style>
</head>
<body style="background-image: url(images/iphone_startup.png) no-repeat;">
<div style="width:320px; height:400px; overflow:hidden">
<div id="t1" style="width:320px; height:400px;" class="bd1">aaddsadsa</div>
<div id="t2" style="width:320px; height:400px;" class="bd1">aaddsadsa112地方艾丝凡啊</div>
</div>
<script language="javascript">
function animate(div_old, div_new, transition) {
	// get width and height of the div
	var width  = 320;
	var height = 400;
	if(div_old.tagName.toUpperCase()!= "DIV")
	{
		console.log('animate: div_old error, must be div');
	}
	if(div_new.tagName.toUpperCase()!= "DIV")
	{
		console.log('animate: div_new error, must be div');
	}
	if(typeof(div_old.parentNode)!='undefined') div_old.parentNode.style.cssText += '-webkit-perspective: 700px; overflow: hidden;';
	
	var comcss = ' width: '+ width +'px; height: '+ height +'px; overflow: hidden;';
	div_old.style.cssText = 'position: absolute; z-index: 0; -webkit-backface-visibility: hidden;';
	div_new.style.cssText = 'position: absolute; z-index: 1; -webkit-backface-visibility: hidden;';
	if(arguments.length>3) div_new.innerHTML = arguments[3];
	switch (transition) {
		case 'slide-left':
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0);';
			div_new.style.cssText += comcss +'-webkit-transform: translate3d('+ width +'px, 0, 0);';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0px, 0, 0);';
				div_old.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(-'+ width +'px, 0, 0);';
			}, 1);
			break;
			
		case 'slide-right':
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0);';
			div_new.style.cssText += comcss +'-webkit-transform: translate3d(-'+ width +'px, 0, 0);';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0px, 0, 0);';
				div_old.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d('+ width +'px, 0, 0);';
			}, 1);
			break;
						
		case 'slide-down':
			// init divs
			div_old.style.cssText += comcss +'z-index: 1; -webkit-transform: translate3d(0, 0, 0);';
			div_new.style.cssText += comcss +'z-index: 0; -webkit-transform: translate3d(0, 0, 0);';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0, 0, 0);';
				div_old.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0, '+ height +'px, 0);';
			}, 1);
			break;
		
		case 'slide-up':
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0);';
			div_new.style.cssText += comcss +'-webkit-transform: translate3d(0, '+ height +'px, 0);';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0, 0, 0);';
				div_old.style.cssText += '-webkit-transition: .5s; -webkit-transform: translate3d(0, 0, 0);';
			}, 1);
			break;
			
		case 'flip-left':
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: rotateY(0deg);';
			div_new.style.cssText += comcss +'-webkit-transform: rotateY(-180deg);';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateY(0deg);';
				div_old.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateY(180deg);';
			}, 1);
			break;
			
		case 'flip-right':
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: rotateY(0deg);';
			div_new.style.cssText += comcss +'-webkit-transform: rotateY(180deg);';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateY(0deg);';
				div_old.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateY(-180deg);';
			}, 1);
			break;
			
		case 'flip-top':
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: rotateX(0deg);';
			div_new.style.cssText += comcss +'-webkit-transform: rotateX(180deg);';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateX(0deg);';
				div_old.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateX(-180deg);';
			}, 1);
			break;
			
		case 'flip-bottom':
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: rotateX(0deg);';
			div_new.style.cssText += comcss +'-webkit-transform: rotateX(-180deg);';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateX(0deg);';
				div_old.style.cssText += '-webkit-transition: .5s; -webkit-transform: rotateX(180deg);';
			}, 1);
			break;
			
		case 'pop-in':
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0);';
			div_new.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); -webkit-transform: scale(.8); opacity: 0;';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; -webkit-transform: scale(1); opacity: 1;';
				div_old.style.cssText += '-webkit-transition: .5s;';
			}, 1);
			break;
			
		case 'pop-out':
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); -webkit-transform: scale(1); opacity: 1;';
			div_new.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); opacity: 0;';

			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; opacity: 1;';
				div_old.style.cssText += '-webkit-transition: .5s; -webkit-transform: scale(1.7); opacity: 0;';
			}, 1);
			break;
			
		default:
			// init divs
			div_old.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); opacity: 1;';
			div_new.style.cssText += comcss +'-webkit-transform: translate3d(0, 0, 0); opacity: 0;';
			
			// -- need a timing function because otherwise not working
			window.setTimeout(function() {
				div_new.style.cssText += '-webkit-transition: .5s; opacity: 1;';
				div_old.style.cssText += '-webkit-transition: .5s; opacity: 1;';
			}, 1);
			break;
	}
}

function t1()
{
	animate(document.getElementById('t1'),document.getElementById('t2'),'flip-top');
	//jQuery('#t1').addClass('out');
	//document.getElementById('t1').style.cssText='position: absolute; z-index: 0; -webkit-transition:background-color 5s ease 0,color 3s ease 0;background-color: #0f0; color:#f0f';
}
function t2(div)
{
	//document.getElementById('t1').style.cssText='position: absolute; z-index: 0; -webkit-transition:-webkit-transform 3s ease 0;-webkit-transform: rotateX(90deg)';
	
	window['iscroll_'+div.id] = new iScroll(div, { desktopCompatibility: true, zoom: false });
	setTimeout(new Function("window['iscroll_"+ div.id +"']..refresh()"), 100);
}
</script>
<a href="javascript:t1()">t1</a><br>
<a href="javascript:t2()">t2</a><br>
</body>
</html>

【上篇】TreeView如何实现全选
【下篇】Openoffice fedora/linux build

作者: alabaster

该日志由 alabaster 于11年前发表在综合分类下，最后更新于 2013年09月06日.
转载请注明: css3 transition | 学步园 +复制链接

抱歉!评论已关闭.

学步园

css3 transition

作者: alabaster

书签

最新文章New

本站推荐

返回首页