CSS3过渡属性：transition

CSS3过渡属性：transitiion

概念：CSS3的transition允许css的属性值，在一定的时间区内平滑过渡，可以在鼠标滑过点击获得焦点或对于元素任何改变中触发，并圆滑的移动化效果改变CSS的属性值。（过渡需要触发事件：如hover）
使用：过渡属性要添加给发生变化的元素，要写在元素初始效果中，如果写在变化后效果里，在触发效果消失后，过渡不会圆滑恢复。

1、transition property：检索或设置对象中的参与过渡的属性。

说明：可以单独设置一个属性以及多个属性（width，height等），默认为all

只给height设置了transition-porperty，所以高度有了过渡效果而width没有

2、transition-delay：检索或设置对象延迟过渡时间。

说明：用来设置过渡的时间长短(s，ms)
改变时间为3秒的高度从100px到300px过渡

3、transitio-delay: 检索或设置对象延迟过渡时间。

说明：设置过渡延迟（s，ms）属性值为正值的时候是延迟执行过渡效果，负值时加速执行过渡效果。


因为设置的是-2s，所以过渡会提前运行2s，看到的画面是从第2秒开始的。如果设置为正值，则是鼠标滑入，过两秒后过渡效果显现。

4、transition-timing-function:检索对象或设置对象过渡的动画类型。
transition-timing-function: linear;
说明： linear 匀速
ease（默认）逐渐减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速

另外可以使用贝塞尔曲线值：cubic-bezier(.11,1.48,.63,-0.57)（数值从网站获得）https://cubic-bezier.com
transition-timing-function: cubic-bezier(.11,1.48,.63,-0.57);

**总结:复合式写法
transition:height 3s -1s linear;
注意！过渡时间与延迟时间不能互换，第一个时间值代表过渡时间，第二个时间值代表延迟时间。