过渡 - 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