过渡 - transition

过渡 - transition 是变形transfrom其中一种效果，定义为一种状态过渡到另一种状态的过程，今天学习到css3动画，特此记录下过渡的使用和一些效果。

实例1：

	<div class="box"></div>
	<p>鼠标移动到 .box 元素上，查看过渡效果。</p>

.box{
		width: 100px;
		height: 100px;
		background: red;
		margin: 0 auto;	

		transition-duration: 1s;  /*花费时间*/
		transition-property: all;
		transition-delay:0s; /* 延迟 */
		transition-timing-function: linear; /*匀速*/
	}
.box:hover{
		width:200px;
		background: #00FFFF;
	}

效果图：



注：当指针移出元素时，它会逐渐变回原来的样式。

实例2：

在例子中使用所有过渡属性 - 使用简写

.box{
		.box{
			width: 100px;
			height: 100px;
			background: red;
			margin: 0 auto;	

			transition:1s all 0s linear;
		}

效果图还是这样：

下面是我的简单总结

总：

transition:2s all;

transition:2s 1s all linear；

注：1s是延迟 linear过渡的属性

分开写：

1.transition:2s; 给它本身＋这个过渡的属性：所需时间

2.transition-timing-function:linear; 匀速

5.transition: -delay timing-function -duration;

transition-timing-function 属性

值	描述
linear	匀速
ease	慢快慢
ease-in	慢开始
ease-out	慢结束
ease-in-out	慢开始和结束

  参考文章：

runoob