Make an element change colour over time that is only visible when the element is hovered, but independent of the hover itself

Question

This hypothetical button would be yellow when it isn't hovered, but would be a different colour depending on what time you do hover over it. So the animation would be persistent whether or not it is being hovered and if you never hovered it, you would never know the colour on hover is changing because it would always be yellow otherwise.

I hope this explanation makes sense. I haven't got any code to offer, because if it is doable I have no idea where I would start.

EDIT:

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"); 
  });
});

I did try to make a JSFiddle, but I couldn't get it working for some reason.

Anyway, this makes the box change colour after the class is added and you also hover the box and the animation restarts every time you hover the box. What I'm after is making the animation happen regardless of the hover, but only be visible when hovered so the box would otherwise be pink.

Answer 1

I've got a jquery solution, and with a bit of work it could be migrated to vanilla javascript. Also, there's a 1/6 chance of no color change, but it should give you a sense of one way to go about doing this:

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());
})

example JSFiddle: https://jsfiddle.net/needsmorejson/yL31cjtd/19/

Answer 2

An idea is to use multiple background to have two layers. The top one always visible and with the same color and the bottom one will be animated continously and changing its color (we cannot see it of course). The on hover you make the first layer invisible and you pause the animation and we will see the new color.

Here is an example:

 .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>