使元素隨時間改變顏色，該顏色僅在元素懸停時可見，但與懸停本身無關

Question

這個假設的按鈕在沒有懸停時會是黃色的，但會根據您懸停在它上面的時間而呈現不同的顏色。 因此，無論是否懸停動畫都將是持久的，如果您從未懸停過它，您將永遠不會知道懸停時的顏色會發生變化，因為否則它始終是黃色的。

我希望這個解釋是有道理的。 我沒有任何代碼可以提供，因為如果可行，我不知道從哪里開始。

編輯：

HTML

<div class = "box"></div>
<button class = "btn">Colour change animation</button>

CSS

.box {
  margin : 50px;
  height  :200px;
  width  : 200px;
  background-color : pink;
}

.colour-changer:hover {
  animation : colour-change 5s linear 0s;
}

@keyframes colour-change {

  0% {
  }

  100% {
    background-color : purple;
  }

}

JS

document.addEventListener("DOMContentLoaded", function(){
    document.getElementsByClassName("btn")[0].addEventListener("click", function(){
    document.getElementsByClassName("box")[0].classList.add("colour-changer"); 
  });
});

我確實嘗試制作一個 JSFiddle，但由於某種原因我無法讓它工作。

無論如何，這會使框在添加類后更改顏色，並且您還懸停該框，並且每次懸停該框時動畫都會重新啟動。 我所追求的是無論懸停如何都使動畫發生，但只有在懸停時才可見，否則框將是粉紅色的。

Answer 1

我有一個 jquery 解決方案，通過一些工作，它可以遷移到 vanilla javascript。 此外，沒有顏色變化的可能性為 1/6，但它應該讓您了解一種方法：

HTML：

<div class = "box"></div><button class = "btn">Colour change when hovered</button>

CSS：

button{
  background-color:yellow;
}
.color-0{
  background-color:purple !important;
}
.color-1{
  background-color:blue !important;
}
.color-2{
  background-color:green !important;
}
.color-3{
  background-color:yellow !important;
}
.color-4{
  background-color:orange !important;
}
.color-5{
  background-color:red !important;
}

Javascript（+ JQuery）：

$("button").on("mouseenter",function(){
  $(this).removeClass("color-0");
  $(this).removeClass("color-1");
  $(this).removeClass("color-2");
  $(this).removeClass("color-3");
  $(this).removeClass("color-4");
  $(this).removeClass("color-5");
  var d = new Date();
  var seconds = d.getSeconds();
  var color = parseInt(seconds % 6);
  $(this).addClass("color-"+color.toString());
})

示例 JSFiddle： https ://jsfiddle.net/needsmorejson/yL31cjtd/19/

Answer 2

一個想法是使用多個背景有兩個圖層。 頂部的始終可見並具有相同的顏色，底部的將連續動畫並改變其顏色（我們當然看不到它）。 在懸停時，您使第一層不可見，然后暫停動畫，我們將看到新顏色。

下面是一個例子：

 .box { height: 200px; width: 200px; background-image: linear-gradient(yellow, yellow), linear-gradient(red, red); background-size: 100%, 100%; animation: change 5s linear infinite alternate; } .box:hover { background-size: 0%, 100%; animation-play-state: paused } @keyframes change { 0% { background-image: linear-gradient(yellow, yellow), linear-gradient(red, red); } 30% { background-image: linear-gradient(yellow, yellow), linear-gradient(orange, orange); } 60% { background-image: linear-gradient(yellow, yellow), linear-gradient(blue, blue); } 100% { background-image: linear-gradient(yellow, yellow), linear-gradient(green, green); } }

 <div class="box"></div>