Animation Utilities

Twigwind provides a comprehensive set of animation utilities using a dynamic syntax pattern. All keyframes are defined in css.css and work seamlessly with the framework's JavaScript-powered utility generation.

💡 Tip: All animations work seamlessly with hover states and responsive prefixes for maximum flexibility.

Animation Syntax

Twigwind uses a dynamic animation syntax pattern:

Syntax Pattern

animate-(keyframe)-(duration)-(direction)

keyframe: The animation name (e.g., spin, bounce, fadeIn)
duration: Time with unit (e.g., 500ms, 2s, 1.5s)
direction: Animation direction (infinite, normal, reverse, alternate, alternate-reverse)

Available Keyframes

All keyframes are defined in css.css and include:

spin - 360° rotation
pulse - Opacity and scale pulsing
bounce - Vertical bouncing with easing
ping - Scale and fade effect
fadeIn - Fade in from transparent
fadeOut - Fade out to transparent
slideUp - Slide in from bottom
slideDown - Slide in from top
slideLeft - Slide in from right
slideRight - Slide in from left
zoomIn - Scale in from zero
zoomOut - Scale out to zero
shake - Horizontal oscillation
wiggle - Rotational oscillation
heartbeat - Scale pulsing
flash - Opacity flashing
rubberBand - Elastic deformation

Basic Animations

Essential animations for common UI interactions:

Example

<div class="animate-spin-1s-infinite bg-blue p-10">Loading spinner</div>
<div class="animate-pulse-2s-infinite bg-green p-10">Pulsing element</div>
<div class="animate-bounce-800ms-infinite bg-red p-10">Bouncing box</div>
<div class="animate-ping-1s-infinite bg-yellow p-10">Notification ping</div>

Entrance Animations

Smooth entrance effects for revealing content:

Example

<div class="animate-fadeIn-600ms-normal bg-purple p-10">Fading in</div>
<div class="animate-slideUp-500ms-normal bg-teal p-10">Sliding up</div>
<div class="animate-slideDown-700ms-normal bg-orange p-10">Sliding down</div>
<div class="animate-slideLeft-400ms-normal bg-pink p-10">Sliding left</div>
<div class="animate-slideRight-400ms-normal bg-cyan p-10">Sliding right</div>
<div class="animate-zoomIn-800ms-normal bg-indigo p-10">Zooming in</div>

Exit Animations

Smooth exit effects for hiding content:

Example

<div class="animate-fadeOut-500ms-normal bg-red p-10">Fading out</div>
<div class="animate-zoomOut-600ms-normal bg-blue p-10">Zooming out</div>

Special Effects

Eye-catching animations for emphasis and interaction:

Example

<div class="animate-shake-300ms-normal bg-red p-10">Shake on error</div>
<div class="animate-wiggle-500ms-normal bg-yellow p-10">Wiggle effect</div>
<div class="animate-heartbeat-1s-infinite bg-pink p-10">Like button</div>
<div class="animate-flash-800ms-infinite bg-orange p-10">Flash notification</div>
<div class="animate-rubberBand-1s-normal bg-green p-10">Elastic effect</div>

Animation Directions

Control how animations play with different direction values:

normal - Play animation once in normal direction
reverse - Play animation once in reverse direction
infinite - Loop animation infinitely
alternate - Alternate between normal and reverse
alternate-reverse - Alternate starting with reverse

Example

<div class="animate-spin-2s-normal">Spin once</div>
<div class="animate-spin-2s-reverse">Spin reverse</div>
<div class="animate-spin-1s-infinite">Spin forever</div>
<div class="animate-bounce-1s-alternate">Bounce back and forth</div>

Duration Examples

Use different time units and values for precise control:

Example

<!-- Milliseconds -->
<div class="animate-fadeIn-300ms-normal">Fast fade</div>
<div class="animate-fadeIn-800ms-normal">Medium fade</div>
<div class="animate-fadeIn-1500ms-normal">Slow fade</div>

<!-- Seconds -->
<div class="animate-bounce-0.5s-infinite">Fast bounce</div>
<div class="animate-bounce-1s-infinite">Normal bounce</div>
<div class="animate-bounce-2s-infinite">Slow bounce</div>

Hover Animations

Trigger animations on hover for interactive effects:

Example

<div class="hover:animate-spin-500ms-normal bg-blue p-10">Hover to spin</div>
<div class="hover:animate-bounce-600ms-normal bg-green p-10">Hover to bounce</div>
<div class="hover:animate-shake-300ms-normal bg-red p-10">Hover to shake</div>
<div class="hover:animate-pulse-1s-infinite bg-purple p-10">Hover to pulse</div>

Responsive Animations

Control animations at different screen sizes:

Example

<div class="animate-pulse-2s-infinite 
           sm:animate-spin-1s-infinite 
           md:animate-bounce-800ms-infinite 
           lg:animate-shake-500ms-normal">
  Different animations at different screen sizes
</div>

Combining with Other Utilities

Mix animations with other Twigwind utilities for complex effects:

Example

<!-- Animation with color changes -->
<div class="animate-pulse-2s-infinite bg-blue hover:bg-red">
  Pulsing element with color change on hover
</div>

<!-- Animation with position -->
<div class="absolute top-50 left-50 animate-bounce-1s-infinite">
  Bouncing positioned element
</div>

<!-- Animation with gradients -->
<div class="gradient-to-r-blue-purple animate-spin-3s-infinite p-20">
  Spinning gradient
</div>

✅ All animations are optimized for performance and work smoothly across modern browsers!

⚠️ Note: Use animations sparingly to avoid overwhelming users. Consider accessibility preferences for motion.

💡 Pro Tip: The JavaScript engine dynamically generates CSS for each unique animation combination, ensuring optimal performance.