Motion with Meaning
Animation should never be decoration; it should be communication. A button that "pulses" gently tells the user where to click. A list that "slides in" shows the relationship between items. However, poorly implemented animations can cause "jank" and drain mobile batteries.
The Power of the GPU
To keep animations smooth (60fps), you should focus on properties that the browser can hardware-accelerate. This primarily includes transform (scale, rotate, translate) and opacity. Avoid animating properties like width, height, or margin, as they force the browser to recalculate the entire page layout on every frame.
Tailwind v4 Animation Tokens
In Tailwind v4, custom animations are easier than ever to manage. You can define your @keyframes and --animate tokens directly in your @theme block. This keeps your motion logic centralized and reusable. Our Animation Generator allows you to build these complex timing functions visually and ensures your output is performance-optimized for all modern browsers.