transition属性的格式:
transition:transition-property,transition-duration,transition-timing-function,transition-delay;
它的四个过渡属性是这样的意思:
transition-property:规定设置过渡效果的属性名称。
transition-duration:规定完成这个过渡效果需要多少秒或者毫秒。
transition-timing-function:规定这个过渡效果的速度曲线。
transition-delay:规定过渡的延迟时间。
过渡的动画类型主要有:
linear:线性过渡。
ease:平滑过渡。
ease-in:逐渐加速。
ease-out:逐渐减速。
ease-in-out:先加速后减速。
他们的属性介绍主要是:
linear:规定以相同的速度开始至结束的过渡效果。
ease:规定慢速开始逐渐变快然后慢速结束的过渡效果。
ease-in:规定以慢速度开始的过渡效果。
ease-out:规定以慢速度结束的过渡效果。
ease-in-out:规定以慢速开始至结束的过渡效果。
我们做一个小例子,我们利用伪类,当光标移动在div上,背景颜色由红色变成绿色:
<style>