css-过度延迟

基础知识

动画属性

不是所有的css属性都有过渡效果，一般来讲有中间值的属性都可以设置动画。
参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

---

元素状态

初始状态：指当页面加载后的样式状态，下面是表单设置的初始样式。变化形态：指元素由初始状态变化后的状态，比如鼠标放上、表单获得焦点后的形态。

transition-property

用于设置哪些属性应用过渡效果。 默认值：all ， 多个属性设置时用，隔开。

transitionend

用于控制过渡结束后执行的JS事件。
注意，简写属性会触发多次js事件， 例如border。

例子：
div.addEventListener('transitionend',function(e){
    console.log(e);
})

transition-duration

用于设置过渡时间。

• 可使用单位为 ms毫秒、s秒
• 默认值为0s不产生过渡效果
• 一个值时，所有属性使用同样的时间
• 二个值时，奇数属性使用第一个，偶数属性使用第二个
• 变化属性数量大于时间数量时，后面的属性再从第一个时间开始重复使用

transition-timing-function

用于设置过渡效果的速度。
参考 https://cubic-bezier.com

值	描述
linear	规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease	开始慢，然后快，慢下来，结束时非常慢(cubic-bezier(0.25,0.1,0.25,1))
ease-in	开始慢，结束快(等于 cubic-bezier(0.42,0,1,1))
ease-out	开始快，结束慢(等于 cubic-bezier(0,0,0.58,1))
ease-in-out	中间快，两边慢(等于 cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值

步进速度

过渡使用阶梯化呈现，有点像现实生活中的机械舞。

选项	说明
steps(n,start)	设置n个时间点，第一时间点变化状态
steps(n,end)	设置n个时间点，第一时间点初始状态
step-start	等于steps(1,start)，可以理解为从下一步开始
step-end	等于steps(1,end)，可以理解为从当前步开始

transition-delay

设置延迟过渡的时间。

• 默认为0s即立刻开始过渡
• 值可以为负数
• 变化属性数量大于时间数量时，后面的属性再从第一个时间开始重复使用

transition

可以使用transition 指令将过渡规则统一设置，需要注意以下几点。

• 必须设置过渡时间
• 延迟时间放在逗号或结束前

eg.  transition: border-radius linear 2s 0s,
            background 2s 2s,
            width linear 2s 4s,
            height linear 2s 4s;

例子 ： 点赞案例