CSS3的过渡效果

今天来讲的是很重要的一个CSS属性-过渡（transition），有了这个属性，你的页面将会变得特别美观，用户体验感极强，来让我们看看怎么使用！

首先来看看过渡究竟是什么

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

1. 规定您希望把效果添加到哪个 CSS 属性上
2. 规定效果的时长

其次来看看有哪些属性可以使用：

transition	复合属性，用于在一个属性中设置四个过渡属性	

transition-property	规定应用过渡的 CSS 属性的名称

transition-duration	定义过渡效果花费的时间。默认是0 
	
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"

transition-delay	规定过渡效果何时开始。默认是 0

细说每个属性的设置

transition-property：

这个主要是用于声明你将过渡效果应用到那个元素的属性上去，比如元素的宽高，背景颜色，边框样式，字体大小等

比如：

transition-property: background;

具体的属性有这些个：

属性名称     类型
transform     				 	all
background-color  			 	color
background-image  			 	only gradients
background-position    			percentage, length
border-bottom-color  			color
border-bottom-width  			length
border-color   					color
border-left-color   			color
border-left-width   			length
border-right-color  			 color
border-right-width   			length
border-spacing   				length
border-top-color  				 color
border-top-width   				length
border-width   					length
bottom    						length, percentage
color   						color
crop    						rectangle
font-size   					 length, percentage
font-weight   					number
grid-*   						various
height  				 		length, percentage
left   							length, percentage
letter-spacing   				length
line-height   					number, length, percentage
margin-bottom   				length
margin-left  					 length
margin-right   					length
margin-top  					 length
max-height  					 length, percentage
max-width   					length, percentage
min-height  				 	length, percentage
min-width   					length, percentage
opacity  						 number
outline-color  					 color
outline-offset  				 integer
outline-width   				length
padding-bottom  				 length
padding-left  					 length
padding-right  					 length
padding-top   					length
right   						length, percentage
text-indent   					 length, percentage
text-shadow  					 shadow
top   							length, percentage
vertical-align 					  keywords, length, percentage
visibility   					 visibility
width   					 	length, percentage
word-spacing   				 	length, percentage
z-index    						integer
zoom   								number

transition-timing-function：

该属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，有下面这些函数：

给大家看看具体的效果：

ease:由快到慢到更慢

linear:恒速

ease-in:越来越快

ease-out:越来越慢

ease-in-out:先加速后减速

transition-delay：
这个就是过渡效果的延迟，就是延迟多少秒或者毫秒才开始过渡

transition-delay: 2s;

transition-duration：
这个是过渡效果持续的时间，一般用秒或者毫秒

transition-duration: 5s;

transition：
这个就是将四个效果写在一起

transition: width 1s linear 2s