css3过渡

过渡的语法

transition-property: none |all |property;

//规定应用过渡的 CSS 属性的名称。比如属性值为all那么代表width和height全部变化；单写width就表示长度变化。

transition-duration：time;

//该属性表示一个旧属性到一个新属性的时间

transition-timing-function：linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);

//该属性是过渡的“缓动函数”。
linear代表初始状态到中止状态由快到慢
ease代表变化速度是匀速的
ease-in代表有一定加速度的变化状态，速度变快
ease-out代表有一定减速度的变化状态，速度变慢
ease-in-out是先加速后减速

---

transition属性是个复合属性，我们也可以直接像margin那样直接给transition加上四个属性值，如transition:all 0 ease 0 ；顺序不可以变化；

---

代码实例

html为

<div id="transition"></div>

css为

#transition:hover{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			#transition{
				width: 100px;
				height: 100px;
				background-color: yellow;
				transition: all 2s linear 0 ;
			}

由于transition的property为all那么此时它的高和宽都在过渡变化

此时它的动画效果就由黄色逐渐变成红色了，大小也由原来的100px变成300px。