Animate one or more elements using the Web Animations API. Automatically respects prefers-reduced-motion.
prefers-reduced-motion
Optional
animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 }); animate([el1, el2], [{ opacity: 0 }, { opacity: 1 }], 300); Copy
animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 }); animate([el1, el2], [{ opacity: 0 }, { opacity: 1 }], 300);
Fade in one or more elements from opacity 0 to 1.
animate.fadeIn(el); animate.fadeIn([el1, el2], 500); Copy
animate.fadeIn(el); animate.fadeIn([el1, el2], 500);
Fade out one or more elements from opacity 1 to 0.
animate.fadeOut(el); animate.fadeOut([el1, el2], 500); Copy
animate.fadeOut(el); animate.fadeOut([el1, el2], 500);
Slide one or more elements to a position via CSS transform.
animate.slideTo(el, { x: 10, y: -20 }, 300); Copy
animate.slideTo(el, { x: 10, y: -20 }, 300);
Animate one or more elements using the Web Animations API. Automatically respects
prefers-reduced-motion.