Skip to main content
Zoom and scale animations change the size of elements, creating emphasis, depth, and engaging transitions. These animations are perfect for drawing attention to important UI elements.

​
Zoom Animations

Element scales up while fading in.
<div class="animate-zoom-in">
  Zooms from 0.5x to 1x scale
</div>
Animation details:
  • Starts: opacity: 0; transform: scale(0.5)
  • Ends: opacity: 1; transform: scale(1)
Duration: 600msBest for: Modal dialogs, image lightboxes, feature reveals, call-to-action buttons

​
Basic Scale Animations

​
scale

Simple scaling up without opacity change. 
<div class="animate-scale">
  Scales from 1x to 1.1x
</div>
Animation: scale(1) to scale(1.1) Duration: 600ms Best for: Hover effects, button presses, card emphasis

​
pop

Quick expansion and contraction for a “pop” effect. 
<div class="animate-pop">
  Quickly expands and contracts
</div>
Animation sequence:
  • Start: scale(1)
  • 50%: scale(1.1)
  • End: scale(1)
Duration: 600ms Best for: Button clicks, notifications, attention-grabbing elements

​
Directional Scale Animations

Element expands from left to right.
<div class="animate-expand-horizontally">
  Expands horizontally from scaleX(0) to scaleX(1)
</div>
Technical: transform: scaleX(0) to transform: scaleX(1)Duration: 600msBest for: Progress bars, loading indicators, underlines, horizontal revealsTip: Add origin-left or origin-right to control expansion direction
Element contracts from full width to zero.
<div class="animate-contract-horizontally">
  Contracts from scaleX(1) to scaleX(0)
</div>
Technical: transform: scaleX(1) to transform: scaleX(0)Duration: 600msBest for: Closing progress bars, collapsing elements horizontally
Element expands from top to bottom.
<div class="animate-expand-vertically">
  Expands vertically from scaleY(0) to scaleY(1)
</div>
Technical: transform: scaleY(0) to transform: scaleY(1)Duration: 600msBest for: Dropdown menus, accordion panels, vertical progress indicatorsTip: Combine with origin-top or origin-bottom for direction control
Element contracts from full height to zero.
<div class="animate-contract-vertically">
  Contracts from scaleY(1) to scaleY(0)
</div>
Technical: transform: scaleY(1) to transform: scaleY(0)Duration: 600msBest for: Collapsing menus, closing accordion sections

​
Combined Scale Animations

​
bounce-fade-in

Combines scaling with opacity for an energetic entrance. 
<div class="animate-bounce-fade-in">
  Bounces from 0.5x to 1x scale while fading in
</div>
Animation details:
  • Starts: transform: scale(0.5); opacity: 0
  • Ends: transform: scale(1); opacity: 1
Duration: 600ms Best for: Success messages, celebration effects, playful UI elements

​
pulsing

Rhythmic scaling animation that expands and contracts. 
<div class="animate-pulsing">
  Continuously pulses between 1x and 1.1x scale
</div>
Animation sequence:
  • 0%: scale(1)
  • 50%: scale(1.1)
  • 100%: scale(1)
Duration: 1000ms Best for: Live indicators, recording buttons, attention signals Note: Often combined with animate-iteration-count-infinite

​
Customization Examples

​
Slow Zoom with Smooth Easing

<div class="animate-zoom-in 
            animate-duration-slower 
            animate-bezier-cubic-out">
  Elegant, slow zoom
</div>

​
Quick Pop on Click

<button class="active:animate-pop animate-duration-faster">
  Quick feedback on press
</button>

​
Infinite Pulsing Indicator

<div class="animate-pulsing 
            animate-iteration-count-infinite 
            animate-duration-slow">
  Continuously pulses
</div>

​
Bouncy Scale with Back Easing

<div class="animate-scale 
            animate-bezier-back-out 
            animate-duration-normal">
  Overshoots then settles
</div>

​
Progressive Loading Bar

<div class="h-2 bg-gray-200 rounded overflow-hidden">
  <div class="h-full bg-blue-500 
              animate-expand-horizontally 
              animate-duration-1000 
              origin-left">
  </div>
</div>

​
Practical Use Cases

<!-- Backdrop -->
<div class="fixed inset-0 bg-black/50 animate-fade-in" />

<!-- Modal with zoom -->
<div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
            bg-white rounded-lg p-6 shadow-xl
            animate-zoom-in animate-duration-normal">
  <h2>Welcome!</h2>
  <p>Your account has been created.</p>
</div>

​
Image Lightbox

<img src="photo.jpg" 
     class="cursor-pointer hover:animate-scale hover:animate-duration-faster"
     onclick="openLightbox()" />

<!-- Lightbox -->
<div class="fixed inset-0 flex items-center justify-center 
            bg-black/90 animate-fade-in">
  <img src="photo.jpg" class="max-w-4xl animate-zoom-in" />
</div>

​
Button Feedback

<button class="bg-blue-500 text-white px-6 py-3 rounded
               active:animate-pop animate-duration-faster">
  Click Me
</button>

​
Success Notification

<div class="fixed top-4 right-4 
            bg-green-500 text-white p-4 rounded-lg shadow-lg
            animate-bounce-fade-in">
  ✓ Saved successfully!
</div>

​
Live Recording Indicator

<div class="flex items-center gap-2">
  <div class="w-3 h-3 bg-red-500 rounded-full 
              animate-pulsing 
              animate-iteration-count-infinite 
              animate-duration-slow"></div>
  <span>Recording...</span>
</div>

​
Progress Bar

<div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
  <div class="bg-blue-500 h-full 
              animate-expand-horizontally 
              animate-duration-1000 
              origin-left"></div>
</div>

​
Card Hover Effect

<div class="card transition-transform hover:scale-105">
  <!-- Or with animation -->
  <div class="card hover:animate-scale hover:animate-duration-faster">
    Card content
  </div>
</div>

​
Advanced Combinations

​
Staggered Cards Zoom

<div class="grid grid-cols-3 gap-4">
  <div class="animate-zoom-in animate-delay-0">Card 1</div>
  <div class="animate-zoom-in animate-delay-150">Card 2</div>
  <div class="animate-zoom-in animate-delay-300">Card 3</div>
</div>

​
Attention-Seeking Element

<div class="animate-pop 
            animate-iteration-count-thrice 
            animate-delay-1000">
  Pops 3 times after 1 second
</div>

​
Transform Origin Control

<!-- Expand from left -->
<div class="animate-expand-horizontally origin-left">Left to right</div>

<!-- Expand from right -->
<div class="animate-expand-horizontally origin-right">Right to left</div>

<!-- Expand from top -->
<div class="animate-expand-vertically origin-top">Top to bottom</div>

<!-- Expand from center (default) -->
<div class="animate-zoom-in origin-center">Center outward</div>

​
Tips and Best Practices

Control the expansion direction with transform-origin utilities: origin-left, origin-right, origin-top, origin-bottom, origin-center
For directional scale animations, always set transform-origin to control which edge stays fixed.
<div class="animate-expand-horizontally origin-left">
  Expands from left edge
</div>
Avoid scaling elements with text content too much (beyond 1.2x) as it can affect readability.

​
Maintaining Final State

<div class="animate-zoom-in animate-fill-mode-forwards">
  Stays at full scale after animation
</div>

​
Smooth Reversible Animations

<div class="animate-scale 
            animate-iteration-count-infinite 
            animate-direction-alternate 
            animate-duration-slow">
  Smoothly scales up and down
</div>

​
Performance Considerations

  • Scale animations use transform: scale() which is GPU-accelerated
  • Highly performant on all modern devices
  • Safe to animate multiple elements simultaneously
  • Combining with opacity (zoom animations) maintains excellent performance
  • Avoid scaling very large images or complex DOM trees

Build docs developers (and LLMs) love

Get started for freeTalk to us