How can I get or console.log the color of a @keyframes css animation?

user_16316579 0
Viewed 341

The idea is I want the color of a text to change after I hover over. The text color will be the current color of my "cursor" at the moment I hovered over the text.

Cursor Example:

#cursor{
  position: absolute;
  top: 4.6%;
  left: 6.5%;
  width: 30px;
  height: 30px;
  background:  #000000 ;
  border:none;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  transition: 0.2s;
  z-index: -1;
}

#cursor {
  animation: color-change 10s infinite;
}
  
@keyframes color-change {
  0% { background: rgb(0, 0, 0); }
  10% { background: red; }
  20% { background: rgb(255, 81, 0); }
  30% { background: rgb(255, 238, 0); }
  40% { background: rgb(136, 255, 0); }
  50% { background: rgb(0, 255, 21); }
  60% { background: rgb(0, 255, 179); }
  70% { background: rgb(0, 119, 255); }
  80% { background: rgb(76, 0, 255); }
  90% { background: rgb(255, 0, 170); }
  100% { background: rgb(255, 0, 85); }
}
<div id="cursor"></div>
<script type="text/javascript">
  var cursor = document.getElementById('cursor');
  document.addEventListener('mousemove' , function(e) {
      var x = e.clientX;
      var y = e.clientY;
      cursor.style.left =  x + "px";
      cursor.style.top = y + "px";
  });
</script>

How can I get the color of a @keyframes CSS animation?

css-animations css dom html javascript
1 Answers

You can use getComputedStyle and getPropertyValue to get the cursor color while hovering (mouseover) in eventListener, then set the hover elements background-color using event.target. I use a second event handler to set the hover color back to default bg color on the event.target. See snippit for example.

var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.left = x + "px";
  cursor.style.top = y + "px";
});

const target = document.getElementById("targetEl")

function changeBg(e) {
  // check type of event
  if (e.type === 'mouseover') {
    // get computed style of cursor on mouseover
    let compStyle = getComputedStyle(document.getElementById('cursor'))
    // get computed property background-color
    let cursorColor = compStyle.getPropertyValue('background-color')
    // set e.target to background-color of 
    e.target.style.backgroundColor = cursorColor
  }
  // reset background of text back to default on mouseout
  if (e.type === 'mouseout') {
    // get computed style of root HTML which holds
    // the CSS variable that the elements bg is set to
    let targetBg = getComputedStyle(document.documentElement)
    // get property
    let targetBgColor = targetBg.getPropertyValue('--default-bg');
    // set target back to default bg color
    e.target.style.backgroundColor = targetBgColor
  }
}

document.body.addEventListener('mouseover', changeBg)
target.addEventListener('mouseout', changeBg)
:root {
  --default-bg: transparent;
}

#cursor {
  position: absolute;
  top: 4.6%;
  left: 6.5%;
  width: 30px;
  height: 30px;
  background: #000000;
  border: none;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  transition: 0.2s;
  z-index: -1;
}

#cursor {
  animation: color-change 10s infinite;
}

@keyframes color-change {
  0% {
    background: rgb(0, 0, 0);
  }
  10% {
    background: red;
  }
  20% {
    background: rgb(255, 81, 0);
  }
  30% {
    background: rgb(255, 238, 0);
  }
  40% {
    background: rgb(136, 255, 0);
  }
  50% {
    background: rgb(0, 255, 21);
  }
  60% {
    background: rgb(0, 255, 179);
  }
  70% {
    background: rgb(0, 119, 255);
  }
  80% {
    background: rgb(76, 0, 255);
  }
  90% {
    background: rgb(255, 0, 170);
  }
  100% {
    background: rgb(255, 0, 85);
  }
}

#targetEl {
  background-color: var(--default-bg);
}
<div id="cursor"></div>
<div id="targetEl">Hover over this text</div>

Another Option:

*** You could place the eventListener on the document.documentElement and then add a specific class to each element you want your hover effect to trigger on. Then use a conditional to check if the event.target.classList.contains('.specificClass'), this way only elements with that class will be affected by the mouseover rule.

if (e.target.classList.contains('hoverable')) {
  e.target.style.backgroundColor = cursorColor
}

// and 

document.documentElement.addEventListener('mouseover', changeBg)
document.documentElement.addEventListener('mouseout', changeBg)

EDIT: I have changed the styling of the hovered element by using a class. Basically we are getting the computedStyle and property using the event.target. We still use a conditional to check mouseover/mouseout and on mouseout event we toggle the class that styles our hoverable element as we want it styled. Then on mouseout we remove the class. This allows you to add/remove multiple styles using the CSS and not the JS. The key is using the :root -> document.documentElement with variables, we set the color of our element initially to its default color by setting the CSS variable. Then we change the CSS variable using JS and in turn in our CSS it automatically changes as we are referencing the variable to style our hovered element.

if (e.target.classList.contains('hoverable')) {
  e.target.style.backgroundColor = cursorColor
}

// and 

document.documentElement.addEventListener('mouseover', changeBg)
document.documentElement.addEventListener('mouseout', changeBg)


var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.left = x + "px";
  cursor.style.top = y + "px";
});

const target = document.getElementById("targetEl")

function changeBg(e) {
  if (e.target.classList.contains('hoverable')) {
    // check type of event
    if (e.type === 'mouseover') {

      // get computed style of cursor on mouseover
      let compStyle = getComputedStyle(document.getElementById('cursor'))
      // get computed property background-color
      let cursorColor = compStyle.getPropertyValue('background-color')
      // we use a root css variable to handle the property
      // change by setting the root variable to the bg color
      document.documentElement.style.setProperty('--default-color', cursorColor)
      // add the class that handles the styling on hover 
      e.target.classList.add('hovered')
    }
    // reset background of text back to default on mouseout
    if (e.type === 'mouseout') {
      // remove the styled class from our element in the DOM
      e.target.classList.remove('hovered')
    }
  }
}

document.body.addEventListener('mouseover', changeBg)
document.body.addEventListener('mouseout', changeBg)
:root {
  --default-bg: transparent;
  --default-color: black;
}

#cursor {
  position: absolute;
  top: 4.6%;
  left: 6.5%;
  width: 30px;
  height: 30px;
  background: #000000;
  border: none;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  transition: 0.2s;
  z-index: -1;
  animation: color-change 10s infinite;
}

@keyframes color-change {
  0% {
    background: rgb(0, 0, 0);
  }
  10% {
    background: red;
  }
  20% {
    background: rgb(255, 81, 0);
  }
  30% {
    background: rgb(255, 238, 0);
  }
  40% {
    background: rgb(136, 255, 0);
  }
  50% {
    background: rgb(0, 255, 21);
  }
  60% {
    background: rgb(0, 255, 179);
  }
  70% {
    background: rgb(0, 119, 255);
  }
  80% {
    background: rgb(76, 0, 255);
  }
  90% {
    background: rgb(255, 0, 170);
  }
  100% {
    background: rgb(255, 0, 85);
  }
}

body > * {
  transition: color .5s;
}

.hovered {
  color: var(--default-color);
}

#targetEl {
  background-color: var(--default-bg);
  transition: color .5s;
}
<div id="cursor"></div>
<div id="targetEl" class="hoverable">Hover over this text</div>
<div>This element will not change as it does not contain the <i>hoverable</i> class</div>
<h2 class="hoverable">This h2 tag contains the class hoverable!</h2>

user_15335920
Related