transitiion过渡属性

transition过渡属性是指，当css样式属性发生变化的时候，中间有一个变化的过程，该属性就是为了描述这个过程在呢么变化的。

例子：

[html] view plain copy

print ?

1. #div1{  
2.         width: 200px;  
3.         height: 200px;  
4.         background-color: blue;  
5.         /* transition css3属性，表示的是过渡 ，表示一个元素的样式，变成另外一个样式，有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的，延迟0s开始*/  
6.         transition: all 2s ease 0s;  
7.     }  
8.  #div1:hover{  
9.         background-color: green;  
10.         width: 0px;  
11.         height: 0px;  
12.         /* border-radius: 50%;  
13.         box-shadow: 2px 2px 2px black; */  
14.         /*transform:旋转属性(度数)  
15.         translateX:移动属性*/  
16.     }   

	#div1{
			width: 200px;
			height: 200px;
			background-color: blue;
			/* transition css3属性，表示的是过渡 ，表示一个元素的样式，变成另外一个样式，有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的，延迟0s开始*/
			transition: all 2s ease 0s;
		}
	 #div1:hover{
			background-color: green;
			width: 0px;
			height: 0px;
			/* border-radius: 50%;
			box-shadow: 2px 2px 2px black; */
			/*transform:旋转属性(度数)
			translateX:移动属性*/
		} 

如上例所示，就可以看到css样式变化的过程，而transition这个属性就描述了，相应的例子中也写了它相关的几个条件，分别是CSS属性的名称，过渡时间，过渡方式，延迟时间。

下表列出了所有的过渡属性:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。transition-property:width	3
transition-duration	定义过渡效果花费的时间。默认是 0。transition-duration: 2s;	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。transition-timing-function:linear;	3
transition-delay	规定过渡效果何时开始。默认是 0。transition-delay: 2s;	3

下面的两个例子设置所有过渡属性：

实例

在一个例子中使用所有过渡属性：

div { transition-property: width ; transition-duration: 1 s ; transition-timing-function: linear ; transition-delay: 2 s ; /* Safari */ - webkit-transition-property: width ; - webkit-transition-duration: 1 s ; - webkit-transition-timing-function: linear ; - webkit-transition-delay: 2 s ; }