utilities/animation

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

animate-* utility classes table

Tailwind CSS v4 provides these animation utilities: `animate-spin` sets `animation: var(--animate-spin);` which resolves to `spin 1s linear infinite` with keyframes `to { transform: rotate(360deg); }`. `animate-ping` sets `animation: var(--animate-ping);` resolving to `ping 1s cubic-bezier(0, 0, 0.2, 1) infinite` with keyframes `75%, 100% { transform: scale(2); opacity: 0; }`. `animate-pulse` sets `animation: var(--animate-pulse);` resolving to `pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite` with keyframes `50% { opacity: 0.5; }`. `animate-bounce` sets `animation: var(--animate-bounce);` resolving to `bounce 1s infinite` with keyframes `0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }`. `animate-none` sets `animation: none;`. `animate-(<custom-property>)` sets `animation: var(<custom-property>);` for arbitrary CSS variable references. `animate-[<value>]` sets `animation: <value>;` for arbitrary values.

animate-spin usage

Use the `animate-spin` utility to add a linear spin animation to elements like loading indicators, e.g. spinner SVGs inside disabled buttons.

animate-ping usage

Use the `animate-ping` utility to make an element scale and fade like a radar ping or ripple of water, useful for things like notification badges.

animate-pulse usage

Use the `animate-pulse` utility to make an element gently fade in and out, useful for things like skeleton loaders.

animate-bounce usage

Use the `animate-bounce` utility to make an element bounce up and down, useful for things like 'scroll down' indicators.

animate-none disables animation

The `animate-none` utility sets `animation: none;`, removing any animation from an element.

Tailwind CSS v1.6 animation utilities

Tailwind CSS v1.6 introduced four built-in animation utilities: animate-spin, animate-ping, animate-pulse, and animate-bounce. These are customizable using the animation and keyframes sections of tailwind.config.js.

Custom animation configuration in v1.6

Custom animations can be added to Tailwind v1.6 using the tailwind.config.js file. Use the theme.extend.animation section to add animation names and values, and theme.extend.keyframes to define the keyframe rules.

Give your agent this brain