CSS transition 过渡 详解

Posted 2021-01-19 wudapeng

IE10、Firefox、Chrome、Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

Chrome 25 以及更早版本需要前缀 -webkit-。

IE9 以及更早版本不支持 transition 属性。

 

过渡属性

【1】transition-property：

规定应用过渡效果的 CSS 属性的名称（当指定的CSS属性改变时，过渡效果开始），其默认值为 all 。

【2】transition-duration：

规定完成过渡效果需要的时间（单位为 s 或 ms），其默认值为 0s ，意味着如果不指定这个属性，将不会呈现过渡效果。

【3】transition-timing-function：

规定过渡效果的时间曲线。

默认 ease ：慢速开始，中间变快，慢速结束；相当于 cubic-bezier(0.25, 0.1, 0.25, 1)。

可选 liner：匀速运动；相当于 cubic-bezier(0, 0, 1, 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)：在 bezier 函数中自定义 0 ~ 1 之间的数值。

贝塞尔时间曲线详解。。。

【4】transition-delay：

规定过渡效果的延迟时间，默认为 0s 。

 

复合属性

在使用复合属性定义过渡效果时，子属性之间用空格分隔。

transition: width 2s linear;

transition 属性可以指定多个值，当指定多个值时，中间用逗号分隔。

transition: width 2s ease-in-out, height 2s ease-in-out;

 

过渡阶段

【1】过渡分为两个阶段：前进（forward）和反向（reverse）。

【2】若前进阶段还未完成就进入反向阶段，则反向阶段的初始值为前进阶段结束时的瞬时值。

【3】以 :hover 伪类为例，如果在非 hover 状态下设置了 transition 属性，相当于设置了反向状态，此时前进和反向是一致的。

#test {
    width: 100px;
    height: 100px;
    background-color: cyan;
    transition: width 2s, height 2s;
}

#test:hover {
    width: 300px;
    height: 300px;
}

这段代码意味着，当鼠标悬浮时，将 width 变为 300px，将 height 变为300px，过渡时间为 2s；当鼠标离开时，将 width 变为 100px，将 height 变为 100px，过渡时间为 2s。

但是如果在 hover 状态下也设置了 transition 属性，则 hover 状态下的为前进状态，非 hover 状态下的为反向状态。

#test {
    width: 100px;
    height: 100px;
    background-color: cyan;
    transition: width 2s, height 2s;
}

#test:hover {
    width: 300px;
    height: 300px;
    transition: width 5s, height 5s;
}

这段代码意味着，当鼠标悬浮时，将 width 变为 300px，将 height 变为300px，过渡时间为 5s；当鼠标离开时，将 width 变为 100px，将 height 变为 100px，过渡时间为 2s。

注意：在 hover 状态下设置 transition 属性时，明确哪些属性需要过渡，而哪些属性不需要过渡。

 

【4】当子元素和父元素过渡属性一致：若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值；同理，若子元素过渡并未完成就开始父元素的过渡，则将子元素过渡的中间态的值作为父元素过渡的初始值。

#box:hover {
    font-size: 48px;
    transition: font-size 3s;
}

#test:hover {
    font-size: 48px;
    transition: font-size 10s;
}

需要注意的是：当子元素与父元素过渡属性一致，但是过渡时间不一致的时候，如上面这段代码，子元素的过渡时间为 10 秒，父元素的过渡时间为 3 秒，当鼠标悬浮在子元素上时，呈现的是子元素的过渡效果，但是父元素的过渡时间也在开始计算；当子元素上过渡进行了 2 秒，此时将鼠标移入父元素，进行父元素的过渡时，这个属性的过渡时间就只有 1 秒。

 

【5】当需要过渡的属性初始值为 auto 时，不会进行过渡。

#test {
    width: 100px;
    height: 100px;
    margin: 30px auto;
    background-color: cyan;
}

#test:hover {
    transition: margin-left 5s;
    margin-left: 500px;
}

 

【6】隐式过渡，是指一个属性的改变引起另一个属性的改变。

#box {
    width: 300px;
    height: 300px;
    border: 1em solid black;
}

#box:hover {
    font-size: 48px;
    transition: font-size 3s;
}

当 font-size 改变时，border 的宽度也会跟着改变。

Firefox 和 IE 支持隐式过渡。