1.transition-property:规定设置过渡效果的CSS属性的名称。
transition-property:all(默认值)->宽高过渡
transition-property:width->宽过渡
transition-property:height->高过渡
2.transition-duration:规定完成过渡效果需要多少秒或毫秒。
transition-duration:5s->5s完成效果展示
注:需要添加单位:s (秒) ms (毫秒) 1s == 1000ms
3.transition-delay :定义过渡效果何时开始。
transition-delay : 2s //延迟两秒进行过渡
transition-delay : -2s //提前两秒进行过渡
4.transition-timing-function : 规定速度效果的速度曲线。
Linear:匀速
ease(默认值):逐渐慢下来
ease-in:加速
ease-out:减速
ease-in-out:先加速后减速
cubic-bezier:贝赛尔曲线
( http://cubic-bezier.com )
复合写法:
无先后顺序,以下三种使用方式都行
transition:all 2s linear; transition:linear 2s all; transition:2s linear all;
注意:当总时间与延迟时间同时存在的时候,第一个是总时间,第二个是延迟时间。
transition:2s 3s linear all;
注意:不要把transition放到hover中
下面展示一些‘内联代码片
具体运行结果如下:
本人前端小白一个,分享一下学前端的经验,希望借助此博客和大家分享交流。
《逆战班》