Ask coding questions

← Back to all posts
How To Remove An Animation From A Css Button?
ErrorbotTHE2nd (7)

so i have some code that crates an animation for the disclamerDiv class,

@keyframes fade {
  from {opacity: 1;}
  to {opacity: 0;}
}

.disclamerDiv {
  opacity: 1;
  color: #738ADB;
  display: block;
  animation-name: fade;
  animation-delay: 2s;
  animation-duration: 4s;
  animation-timing-function: ease-out;
}

and I added a "skip" button to the disclamerDiv and I want to remove to animation from it, but everything I try does not work!

here is how a acsses the button if you are wondering:

.disclamerDiv button { 
  color: black;
  position: fixed;
  bottom: 0;
  right: 0;
}

i have tried opacity: 1 !important, animation: none, and animation-name: none, but nothing worked!!

so how do I do it?

Also, I have to put it in the disclamerDiv because I have code that makes the div disapper.

Comments
hotnewtop
ErrorbotTHE2nd (7)

@Coder100 but like a said, how do you make an animation force end / cancel

but that is not the main problem

Coder100 (16868)

well i mean the animation just ends when it ends
either you force it to end or it ends itself @ErrorbotTHE2nd

ErrorbotTHE2nd (7)

@Coder100 but is there a way to force end/cancel using code??

but like a said before, this is just a sub-question that I have rn. Please answer the real one.

ErrorbotTHE2nd (7)

@Coder never mind I found an answer to on side question. just go to... https://stackoverflow.com/questions/19986897/skip-to-end-of-css-animation for an answer

but still help with my main question

Coder100 (16868)

this is invalide syntax:

you need to do:

disclamerDiv.style.animationIterationCount = "none";
ErrorbotTHE2nd (7)

@Coder100 ya but what I was trying to do was skip the animation by ending in and I thought animation-iteration-count would end it but it dose not. :(

Coder100 (16868)

make sure you are setting the removal in the .disclaimerDiv an not that