How to Manage CSS Animations with JavaScript


When it concerns animations on the internet, designers require to determine the animation’s requirements with the best innovation– CSS or JavaScript. Numerous animations are workable with CSS however JavaScript will constantly offer more control. With document.getAnimations, nevertheless, you can utilize JavaScript to handle CSS animations!

The document.getAnimations approach returns a variety of CSSAnimation things. CSSAnimation supplies a host of info about the animation: playState, timeline, impact, and occasions like onfinish You can then customize those challenge change animations:

// Make all CSS animations on the page two times as quick.
document.getAnimations(). forEach(( animation) => > {
animation.playbackRate *= 2;.
} );.

// Stop all CSS animations on the page.
document.getAnimations(). forEach(( animation) => > {
animation.cancel();.
} );.

How could changing CSS animations on the fly work to designers? Possibly utilize the Battery API to stop all animations when the gadget battery is low. Perhaps to stop animations when the user has actually scrolled past the animation itself.

I enjoy the method you can utilize JavaScript to customize CSS animations. Designers utilized to require to select in between CSS and JavaScript– now we have the tools to make them interact!

  • An Interview with Eric Meyer

    Your early CSS books contributed in pressing my love for front end innovations. What was it about CSS that you fell for and drove you to discuss it? At very first blush, it was the simpleness of it as compared to the table-and-spacer …

  • Vibration API

    A lot of the brand-new APIs offered to us by internet browser suppliers are more targeted towards the mobile user than the desktop user. Among those easy APIs the Vibration API The Vibration API enables designers to direct the gadget, utilizing JavaScript, to vibrate in …


Like this post? Please share to your friends:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: