Css animation

TODOs

• https://www.joshwcomeau.com/tutorials/animation/

• Directing Focus

  • download complete: bouncing arrow
• Spatial Orientation
  • offscreen animation
  • side bar => will come from the left/right
• Timing
  1. 150-500ms
  2. smaller animations should take less time
  3. larger animations should take more time
• Easing
  • ease-in-out
• Clarity
  • don't animate so many things at once
  • no intersecting paths
  • staggering animations
• Visual Continuinity
  • shape morphing

Pause a CSS keyframe animation

<div class="circle"></div>

.circle {
    animation: pulse 1s infinite ease-in-out;
}

const animations = document.querySelector(".circle").getAnimations();
animations.forEach(animation => {
  animation.pause();
});

bytes-pause-animation - CodeSandbox

---

Last update: 2023-04-24