How to repeat fade-in effect on element?

Question

Update

Adding a delay solved my problem:

setTimeout(() => price.classList.add("fade-it"), 100);

but this answer also worked for me

Original question

I have a fade-in effect on background color that should be repeated from time to time initiated by me.

I'm using pure CSS:

  <style>
    @-webkit-keyframes yellow-fade {
      from {
        background: #f96;
      }
      to {
        background: #fff;
      }
    }
    @-moz-keyframes yellow-fade {
      from {
        background: #f96;
      }
      to {
        background: #fff;
      }
    }
    @keyframes yellow-fade {
      from {
        background: #f96;
      }
      to {
        background: #fff;
      }
    }
    .fade-it {
      -webkit-animation: yellow-fade 1s ease-in-out 0s;
      -moz-animation: yellow-fade 1s ease-in-out 0s;
      -o-animation: yellow-fade 1s ease-in-out 0s;
      animation: yellow-fade 1s ease-in-out 0s;
    }
  </style>

How do I restart this effect after it's already played once?

The code I have is not working after the first time:

    var price = document.getElementById("price");
    if (price.classList.contains("fade-it")) {
      price.classList.remove("fade-it");
    }
    price.classList.add("fade-it");

Does this answer your question? [Trigger CSS Animations in JavaScript](https://stackoverflow.com/questions/44846614/trigger-css-animations-in-javascript) — 0stone0, Sep 19 '22 at 16:40
One of the answers there is "The simplest method to trigger CSS animations is by adding or removing a class". That is what I'm trying to do but it doesn't work. — Ocean Overflow, Sep 19 '22 at 16:44
Check [this answer](https://stackoverflow.com/a/63561659/5625547) about a delay! `setTimeout(() => price.classList.add("fade-it"), 1);` should make it work! — 0stone0, Sep 19 '22 at 16:45
@OceanOverflow I think `requestAnimationFrame` API is the better solution. Maybe give it a try — Sysix, Sep 19 '22 at 17:49

score 1 · Accepted Answer · answered Sep 19 '22 at 19:01

You can accomplish this by removing the node from the DOM then adding it back. The append function does exactly that, just append the element to it's parentNode. Give the element it's own wrapper to be the parentNode that way it will not be reordered with other sibling-elements.

const price = document.getElementById("price");
const btn = document.getElementById("fade-price");
const fade = function() {
  if (price.classList.contains("fade-it")) {
    price.classList.remove("fade-it");
  }
  price.classList.add("fade-it");
}
document.addEventListener("DOMContentLoaded", function() {
  fade()
});
btn.addEventListener("click", function() {
  price.parentElement.append(price)
});

@-webkit-keyframes yellow-fade {
  from {
    background: #f96;
  }
  to {
    background: #fff;
  }
}

@-moz-keyframes yellow-fade {
  from {
    background: #f96;
  }
  to {
    background: #fff;
  }
}

@keyframes yellow-fade {
  from {
    background: #f96;
  }
  to {
    background: #fff;
  }
}

.fade-it {
  -webkit-animation: yellow-fade 1s ease-in-out 0s;
  -moz-animation: yellow-fade 1s ease-in-out 0s;
  -o-animation: yellow-fade 1s ease-in-out 0s;
  animation: yellow-fade 1s ease-in-out 0s;
}

<div>
  <h4 id="price">$9.99</h4>
</div>
<button id="fade-price">
fade
</button>

How to repeat fade-in effect on element?

1 Answers1