Html Question posted in
Some basic documentation can be found here.

Html – CSS: make animation return to initial value (background-color)

I have a box that I want to blink.

  • it should blink indefinitely (infinite)
  • it blinks to white and returns to the initial color
  • there should be a "pause" between each loop (color stays the same)
  • css only, no js

This snippet fulfils all criteria. 30% and 70% keyframes are for the pause between each loop where it stays fully green. In between it blinks to white.

But this example uses hardcoded colors. Is it possible to just have the color set for the object (here body)? Then the box blinks to white und back to its original color, no matter what color the box has at the time. Using "inherit" oder "initial" in the keyframes unfortunately returns it to white.

body {
  animation: blink 3s infinite ease-in-out;
  background-color: green;
}

@keyframes blink {
  30% {background-color: green;}
  50% {background-color: white;}
  70% {background-color: green;}
}
Tags:

2

Answers


  1. 0

    Use a css variable.

    for( let button of document.querySelectorAll("button") ) {
  button.addEventListener( "click", setBlinkColor )
}

function setBlinkColor( event ) {
  document.querySelector('body').style.setProperty('--BlinkColor',event.target.innerText)
}
    #Block1 {
  --BlinkColor: #F80;
  height: 100px;
  width: 100px;

  animation: blink 3s infinite ease-in-out;
  background-color: var(--BlinkColor);
  background-color: var(--BlinkColor);
}

#Block2 {
  --BlinkColor: #83F;
  height: 100px;
  width: 100px;

  animation: blink 3s infinite ease-in-out;
  background-color: var(--BlinkColor);
  background-color: var(--BlinkColor);
}

body {
  height: 300px;
  --BlinkColor: #cab;
  animation: blink 3s infinite ease-in-out;
  background-color: var(--BlinkColor);
}

@keyframes blink {
  30% {background-color: var(--BlinkColor);}
  50% {background-color: white;}
  70% {background-color: var(--BlinkColor);}
}
    <button>RED</button>
<button>GREEN</button>
<button>BLUE</button>



<div id="Block1">
</div>

<div id="Block2">
</div>
    Login or Signup to reply.
  2. 0

    If what you need is some kind of dynamic setting, you can use css variables.

    :root {
    --bg-color: green;
}

.h-33 {
    height: 33vh;
}

.blink {
    animation: blink 3s infinite ease-in-out;
    background-color: var(--bg-color);
}

.blink-green {
    --bg-color: green;
}

.blink-blue {
    --bg-color: blue;
}

@keyframes blink {
    30% {background-color: var(--bg-color);}
    50% {background-color: white;}
    70% {background-color: var(--bg-color);}
}
    <div class="h-33 blink blink-green">

</div>
<div class="h-33 blink blink-blue">

</div>
<div class="h-33 blink" style="--bg-color: purple;">

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search