css过渡颜色背后的数学是什么？

Question

如果我有这个代码:

.box {
    color: #3399FF /* Blue */
    transition: 10s all linear;
}

.box:hover {
    color: #FF3300 /* Red */
}

如果我将鼠标悬停在元素上,则在平滑过渡中,颜色将在10秒内从蓝色变为红色.

如果有时间表:

0秒 - 蓝色

5秒 - ？

10秒 - 红色

有没有办法计算过渡中5秒或任何秒数的颜色？

Answer 1

这由transition-timing-function属性决定,该属性由三次贝塞尔曲线或对应于预定义曲线的预定义关键字表示.在您的示例中,此属性的值为linear,因此在5秒间隔内,该值将恰好是起始值和结束值的平均值.

规范还定义了在转换期间如何计算插值.这就是关于颜色值的说法:

• 颜色:通过红色,绿色,蓝色和alpha分量进行插值(将每个组成一个数字,见下文).插值在预乘颜色之间完成(即,指定的红色,绿色和蓝色分量乘以alpha的颜色).

您可以在使用window.getComputedStyle()等过程中的任何给定时间点获取精确值.从介绍部分:

属性的计算值随时间从旧值转换为新值.因此,如果脚本在转换时查询属性(或其他依赖于它的数据)的计算值,它将看到一个中间值,表示该属性的当前动画值.