CSS3 transition 属性

transition是css3中新添加的特性，在W3C标准中是这样描述的：“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”

一、transition语法：

transition:[<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>||
<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>]

transition主要包含四个属性值：执行变换的属性transition-property，变换延续的时间transition-duration，在延续的时间段内，变换的速率变化transition-timing-function，变换延迟时间transition-delay。

1、变化的属性：transition-property

transition-property : none | all | [<IDENT>][','<IDENT>]* ;

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其中none没有属性改变；all所有属性都改变，它也是默认值；indent元素属性名，其对应的类型如下：

2、动画时间：transition-duration

transition-duration : <time> [,time]*;

transition-duration是动画执行的时间，单位为s（秒），比如0.1秒可以写成“0.1s”或者“.1s”，它可以作用于任何元素，包括:before和:after伪元素。

3、动画执行的方式：transition-timing-function

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;

ease：逐渐慢下来；linear：匀速；ease-in：由慢到快；ease-out：由快到慢；ease-in-out：先慢到快再到慢。

4、动画延迟：transition-delay

transition-delay : <time> [,time]* ;

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition动画效果，取值同transition-duration。

二、实例动画

step1：改变字体颜色

<h1><a href="http://www.rainleaves.com">雨打浮萍</a></h1>

h1 a{
	color:#03c;
	text-decoration:none;
	-webkit-transition:color .5s ease-in-out;
	-moz-transition:color .5s ease-in-out;
	-o-transition:color .5s ease-in-out;
	transition:color .5s ease-in-out;

}
h1 a:hover{
	color:#f60;
}

step2：改变背景颜色

<h2>专注于web前端开发</h2>

h2:hover{
	-webkit-transition:background-color 0.5s linear;
	-moz-transition:background-color 0.5s linear;
	-o-transition:background-color 0.5s linear;
	transition:background-color 0.5s linear;
	background-color:#ccc;
}

step3：转换多个属性

作用transition进行多个属性转换：

<div class="div">
	辛苦遭逢起一经，干戈寥落四周星。山河破碎风飘絮，
	身世浮沉雨打萍。惶恐滩头说惶恐，零丁洋里叹零丁。
	人生自古谁无死？留取丹心照汗青
</div>

.div {
	padding:5px;
	color:#fff;
	background-color:#666;
	-webkit-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;
	-moz-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;
	-o-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;
	transition:color 1s ease-in-out, background-color 0.5s ease-in-out;
}
.div:hover {
	color:#333;
	background-color:#ccc;
}

渐变效果还有另外一种写法：

.div {
	-webkit-transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	-o-transition:all 1s ease-in-out;
	transition:all 1s ease-in-out;
}

第一种写法里面把各个属性都写了出来，而第二种里面用all代替，也就是变换所有属性。

demo:http://rainleaves.com/demo/transition/transition.html  前三个为transition动画实例，后四个为transform实例。

转载请注明本文链接：http://www.rainleaves.com/html/1534.html