transition-property

transition-property: width; // 指定参与过度的属性

transition-duration

transition-duration:2s; // 指定过渡时间，不包括延迟时间

transition-timing-function

transition-timing-function: ease, ease-in; // 指定过渡曲线

步进动画

transition-timing-function: ease, steps(3,start); // 过渡动画分三块，展示开始帧
transition-timing-function: ease, steps(3,end);   // 过渡动画分三块，展示结束帧

简写

transition-timing-function: ease, steps(1,start); // steps(1,start) 简写 step-start
transition-timing-function: ease, steps(1,end);   // steps(1,end) 简写 step-end

transition-delay

transition-delay: 1s; // 过渡延迟1s执行，延迟时间不会算在过渡时间中

组合简写

transtition:all linear 2s 1s; // 第一个时间是过渡时间，第二个时间是延迟时间

最小粒度

过渡属性都是可以被单独设置的

transition-property: width, background-color, height;
transition-duration: 3s, 3s;
transition-timing-function: ease, ease-in;
transition-delay: 1s, 2s, 0s;
// 当属性个数大于设置时个数，会循环对应的设置

事件监听

transitioncancel

过渡被中断，包括在ransition-delay延迟期间。回调函数被执行3次

document.getElementById("d").addEventListener("transitioncancel", () => {
            console.log("transitioncancel")
        })

transitionend

过渡完成。回调函数被执行3次

document.getElementById("d").addEventListener("transitionend", () => {
            console.log("transitionend")
        })

transitionrun

过渡开始，在transition-delay前执行。回调函数被执行3次

document.getElementById("d").addEventListener("transitionrun", () => {
            console.log("transitionrun")
        })

transitionstart

过渡开始，在transition-delay后执行。回调函数被执行3次

document.getElementById("d").addEventListener("transitionstart", () => {
            console.log("transitionstart")
        })

多状态

从A状态过渡到B状态，会使用B状态设置的过渡