使用 JavaScript / jQuery 在两种颜色之间淡入淡出

Question

颜色之间可以淡入淡出吗？

我正在做一个小项目，根据打开网站以来经过的时间，背景应该会改变颜色。它工作正常，但它基于经过的秒数并努力切割到下一个颜色。

所以，例如：

if(totalSeconds > 10){
$('.lead').css('color', '#95EB00');
$('body').css('background-color', '#95EB00');
}
if(totalSeconds > 15){
$('.lead').css('color', '#09E845');
$('body').css('background-color', '#09E845');
}

是否可以在X秒的时间间隔内更改颜色？并淡入下一个颜色？

Answer 1

另一个响应直接回答您的标题，但使用 css 动画将更适合尝试解决的问题。

body {
background-color: red;
animation: bg-transition 5s linear 0s forwards;
}
@keyframes bg-transition {
0%, 50% {
background-color: red; 
}
100% {
background-color: blue;
}
}

Answer 2

尝试添加 css 规则，如下所示：

.lead {
transition: color <desired_transition_time> linear
}