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

转载于:https://juejin.im/post/5d0124a55188252b1043d242