javascript - 使用 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;
  }
}