how to cancel css animation after page reload?-CodePudding

I have this animation on items added to the html:

.fade-in:last-child {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

after the page reload the animation runs again on the same items. there is a way to cancel animation after reload?

CodePudding user response：

To cancel a CSS animation after a page reload for the given code, you can use JavaScript to remove the "fade-in" class from the element on page load.

One way to do this is to add an event listener to the window's "load" event, and within the event listener function, use JavaScript to select the element with the class "fade-in" and remove it.

For example:

window.addEventListener("load", function(){
  document.querySelector(".fade-in:last-child").classList.remove("fade-in");
});

Note that you will need to replace ".fade-in:last-child" with the appropriate class name for your element, and "fade-in" with the class name of the animation you want to cancel.

Also if you want to remove the animation effect completely you can use animation: none

window.addEventListener("load", function(){
  document.querySelector(".fade-in:last-child").style.animation = "none";
});

This will completely remove any animation effect on the element.