Restart animation in CSS3: any better way than removing the element?

by

No need in timeout, use reflow to apply the change:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}
#animated {
  position: absolute;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}
<div id="animated"></div>
<button onclick="reset_animation()">Reset</button>

More Related Contents:

  1. How to get an HTML element’s style values in javascript?
  2. Set CSS property in JavaScript?
  3. Setting CSS pseudo-class rules from JavaScript
  4. Keep overflow div scrolled to bottom unless user scrolls up
  5. Accessing a CSS custom property (aka CSS variable) through JavaScript
  6. Show hide divs on click in HTML and CSS without jQuery
  7. How to access CSS generated content with JavaScript
  8. Submit form fields inside display:none element
  9. How do I get a computed style?
  10. How to add multiple classes to a ReactJS Component?
  11. Changing width property of a :before css selector using JQuery [duplicate]
  12. Google Maps: How to create a custom InfoWindow?
  13. Performance differences between visibility:hidden and display:none
  14. Dashed border animation in css3 animation
  15. How to partition input field to appear as separate input fields on screen?
  16. Fullpage.js. Adding a scroll delay
  17. CSS: Change parent on focus of child
  18. Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?
  19. Make image fill div completely without stretching
  20. Vertical centering variable height image while maintaining max-width/height
  21. How to prevent sticky hover effects for buttons on touch devices
  22. How to show live preview in a small popup of linked page on mouse over on link?
  23. Fade background image in and out with jQuery?
  24. Convert dropdown to selection boxes with color and trigger drop down action
  25. How can I animate the drawing of text on a web page?
  26. using css modules how do I define more than one style name
  27. IIS 7.5 no images css js showing
  28. How do I dynamically adjust css stylesheet based on browser width?
  29. Polymer share styles across elements
  30. How do I put a clear button inside my HTML text input box like the iPhone does?

Leave a Comment