css过渡

transition过渡

CSS3之前，如果要平滑的改变元素。而不是一下就变。就要用到过渡的CSS属性值，例如width从100px修改为200px，通常要借助于JavaScript。

transition属性则可以轻松的实现CSS属性值平滑过渡效果，下面通过代码实例介绍一下它的基本用法。

transition:[transition-property] || [transition-duration] || [transition-timing-function] || [transition-delay]

 

复合形式无法一次设置多个属性渐变；关键词all可以粗暴的实现此功能，所有css属性改变都采用过渡效果。

transition是复合属性，可以将属性分别设置，具体参阅下面的章节：

参数解释：

 

transition-property

设置要进行过渡的CSS属性，设置多个属性，用逗号隔开

 

transition-duration

设置CSS属性过渡效果持续的时间。多个时间用逗号隔开，与transition-property一一对应

 

transition-timing-function

设置过渡效果动画类型。

参数解析：

（1）.linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) 

（2）.ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 

（3）.ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 

（4）.ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) 

（5）.ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 

 

（4）.transition-delay：设置过渡效果延迟的时间。

多个属性以逗号进行分割，与transition-property设置的值一一对应

transition-delay

设置动画开始时延迟时间，多个时间逗号隔开，与property一一对应

#ant:hover{ 
  width:500px; 
  height:200px; 
} 
transition-delay:2s,6s;  

 

//鼠标悬浮在div之上要分别呆2秒，6秒才会开始指向宽度和高度动画过渡

 个人总结重点

过渡本质就是让css的变化不是瞬间完成，而是平稳改变 在要改变的元素那设置transition

transition语法顺序  css属性 持续时间 动画过渡类型 延迟时间