css过渡

css过渡

所谓过渡便是将html的内容及样式从一种状态变为另一种状态的过程。
过渡属性有以下四个：
transition-delay transition-duration transition-property transition-timing-function
transition-delay属性设置延迟时间，简单说就是从触发过渡的那一刻起到开始过渡的时间设置。
例如：div{ position:relative; top:200px; lef:t200px; } div：hover{ left:400px top:400px; transition-delay:20ms; transition-duration:2s; transition-property:top; }
将div盒子的位置从距顶部200px的位置调整至400px的位置，从鼠标移动到div盒子时间隔20ms后盒子移动，用2s的时间移动完毕。

transition-property指定应用过渡的属性。
这个属性的类型有三个，none表示没有属性获得过渡效果，all表示所有的属性都获得过渡效果，也可以定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

例如我设置了transition-property：top;
那么div盒子将从（200px,200px)的位置移向（400px,400px）的位置时，只有竖直方向上显示出过渡效果。

transition-timing-function属性指定过渡期间计算中间值的方式，如图该属性五个值对应五种曲线。

transition在一条声明中指定所有过渡细节的简写属性，格式如下：

transition:<transition-property><transition-duration>
<transition-timing-function><transition-delay>;