How to change animation color on mouseon and mouseout?

Question

I'm building a theme switcher so when you hover something, it changes the color.

It works.

Now, I want to add animation to it, how can I do it?

I know I need a function that does that, but not sure how I can start with it.

Here is the CodePen: https://codepen.io/Aurelian/pen/djYLxx?editors=0010

Here is the HTML:

<div class="organic-body" data-color="#1f2f1e" style="background-color: rgb(31, 51, 34);">
<div class="container">

  <h5>Hover to change color</h5>

  <div class="organic-list">
  <a href="#" class="organic-card js-organic-card-hover" data-color="red">
    <h2>Color red</h2>
  </a>

  <a href="#" class="organic-card js-organic-card-hover" data-color="blue">
    <h2>Color blue</h2>
  </a>

  <a href="#" class="organic-card js-organic-card-hover" data-color="green">
    <h2>Color green</h2>
  </a>
  </div>

</div>
</div>

Here is the JS:

document.addEventListener('DOMContentLoaded', function () {

  // Select each item
  var organicBody = document.querySelector(".organic-body"),
      organicList = document.querySelector(".organic-list"),
      organicCard = document.querySelectorAll(".organic-card");

      organicCard.forEach(function(item) {
        item.addEventListener('mouseover', function(event) {
          var itemDataColor = item.getAttribute('data-color');
          organicBody.style.backgroundColor = itemDataColor;

        })
        item.addEventListener('mouseout', function(event) {
          var bodyColor = organicBody.getAttribute('data-color');
          organicBody.style.backgroundColor = bodyColor;
        });
      })


      // Set interval on how long you want it to animate
      // Convert color to RGB

      function animateColorChange() {

         setTimeout(function(){ 

         }, 3000);

      }

});

Answer 1

Simply modify the CSS to include a transition property, like so:

.organic-body {
  height: 100vh;  
  transition: background-color 1000ms;
}

This means any time the background-color property changes, it should transition gradually over 1000ms

EDIT

If you really must use JS (and I strongly advise against it), this is roughly what you need to do

 let frames = 60; // The number of frames. The lower the number, the choppier the transition let duration = 1000; // How long the transition should take let from = [255, 0, 0]; // RGB values let to = [0, 0, 255]; // RGB values // Calculate the differences between the two let diff = to.map((v, idx) => v - from[idx]); // Divide that by the number of frames to find out what change should be made in each frame let frameChange = diff.map(v => v / frames); let elem = document.getElementById('example'); let step = 1; function tick() { from = from.map((v, idx) => v + frameChange[idx]); elem.style.backgroundColor = `rgb(${from[0]}, ${from[1]}, ${from[2]})`; step++; if (step <= frames) { setTimeout(tick, duration / frames) } } tick()

 div#example { width: 100px; height: 100px; background-color: red; }

 <div id="example"> </div>