Anime.js CSS Animations — Complete Guide with Examples

In this tutorial, you'll learn about Anime.js CSS animations. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Anime.js animates CSS properties including transforms, colors, opacity, border-radius, box-shadow, and CSS filters, providing a complete CSS animation toolkit without writing CSS keyframes.

What You'll Learn

By the end of this tutorial, you'll animate transform properties (translate, rotate, scale), CSS colors, box-shadow, border-radius, clip-path, and CSS filters with Anime's unified syntax.

Why It Matters

CSS animations require keyframe syntax, vendor prefixes, and separate definitions for each element. Anime simplifies all CSS animation into a single JavaScript API with powerful features like easing, callbacks, and timeline sequencing that CSS keyframes cannot match.

Real-World Use

DodaZIP's file extraction animation uses Anime to animate CSS transforms on progress bars and opacity transitions on success indicators, creating a polished UX without wrestling with CSS keyframe syntax.

Where This Fits in Your Learning Path

flowchart LR
    A["Easing Functions"] --> B["**CSS Animations**"]
    B --> C["SVG & Morph"]
    C --> D["Scroll & Performance"]
    D --> E["Advanced Anime.js"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#fff

Animating CSS Transforms

Anime normalizes CSS transform properties into individual camelCase parameters.

anime({
  targets: '.box',
  translateX: 200,
  translateY: 100,
  rotate: '2turn',
  scale: 1.5,
  duration: 2000,
  easing: 'easeInOutQuad'
})

Expected output: The box moves 200px right, 100px down, rotates 720 degrees, and scales to 1.5x simultaneously.

Animating Colors

Anime animates any CSS color property, including hex, rgb, and named colors.

anime({
  targets: '.box',
  backgroundColor: '#ff6b6b',
  color: '#ffffff',
  borderColor: '#a29bfe',
  duration: 1500,
  direction: 'alternate',
  loop: true
})

Expected output: The background, text, and border colors cycle through different values smoothly.

Animating Box Shadow

Box shadows are animated by providing start and end arrays.

anime({
  targets: '.card',
  boxShadow: ['0px 0px 0px rgba(0,0,0,0)', '0px 10px 30px rgba(0,0,0,0.3)'],
  duration: 1000,
  direction: 'alternate',
  loop: true
})

Expected output: The card's shadow fades in and out, creating a floating effect.

Animating Border Radius

Animate border-radius to morph shapes.

anime({
  targets: '.shape',
  borderRadius: ['4px', '50%'],
  duration: 1500,
  direction: 'alternate',
  easing: 'easeInOutQuad'
})

Expected output: The square morphs into a circle and back repeatedly.

Animating CSS Filters

Anime supports CSS filters like blur, brightness, and grayscale.

anime({
  targets: '.image',
  filter: ['blur(0px)', 'blur(5px)'],
  duration: 1500,
  direction: 'alternate',
  loop: true
})

Expected output: The image blurs and unblurs alternately.

Animating Opacity and Visibility

Opacity animations create fade effects.

anime({
  targets: '.message',
  opacity: [0, 1],
  translateY: [-20, 0],
  duration: 800,
  easing: 'easeOutQuad'
})

Expected output: The message fades in while sliding down into position.

Common Mistakes

1. Using CSS shorthand properties

Anime does not support CSS shorthand like 'background' or 'border'. Use individual properties like backgroundColor and borderWidth.

2. Forgetting to animate from a starting value

When animating from the current style, Anime may not detect the initial value. Provide an array with [start, end] to be explicit.

3. Animating display or visibility with anime

display and visibility are not numerical properties and cannot be animated. Use opacity for fade effects.

4. Overlapping transform animations on the same element

Animating translateX and translateY in separate animations on the same element causes conflicts. Combine them in one animation.

5. Expecting cssText or inline style preservation

Anime sets inline styles directly. If your element has existing inline styles, they may be overwritten.

Practice Questions

1. How do you animate a CSS transform with Anime? Use individual properties like translateX, translateY, rotate, scale instead of the CSS transform string.

2. Can Anime animate between any two CSS colors? Yes. Anime interpolates hex, rgb, rgba, and named colors.

3. How do you provide a starting value for a CSS animation? Use an array: [startValue, endValue].

4. Does Anime support CSS variables (custom properties)? Yes. Anime can animate CSS variable values if they contain numerical or color values.

5. Can you animate CSS Grid properties? Anime works best with numerical and color properties. Grid properties like grid-template-columns are not directly animatable.

Challenge

Create a card that continuously animates through a cycle: scales up, changes background color, increases border radius to a circle, adds a glow shadow, then reverses all properties.

FAQ

Mini Project

Build an animated product card with hover effects. On hover, the card scales up, changes shadow, shifts background gradient, and a button fades in. Use anime() on mouseenter and reverse on mouseleave.

const card = document.querySelector('.product-card')
const button = card.querySelector('.buy-btn')

card.addEventListener('mouseenter', () => {
  anime({
    targets: card,
    scale: 1.05,
    boxShadow: '0 15px 40px rgba(0,0,0,0.2)',
    duration: 300,
    easing: 'easeOutQuad'
  })
  anime({
    targets: button,
    opacity: 1,
    translateY: [10, 0],
    duration: 200,
    easing: 'easeOutQuad'
  })
})

card.addEventListener('mouseleave', () => {
  anime({
    targets: card,
    scale: 1,
    boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
    duration: 300,
    easing: 'easeOutQuad'
  })
  anime({
    targets: button,
    opacity: 0,
    translateY: 10,
    duration: 200
  })
})

<div class="product-card" style="width:200px;padding:20px;background:white;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.1);cursor:pointer">
  <h3>Awesome Widget</h3>
  <p>$29.99</p>
  <button class="buy-btn" style="opacity:0;padding:8px 16px;background:#4ecdc4;color:white;border:none;border-radius:4px">Buy Now</button>
</div>

What's Next

Explore SVG and morph animations:

Related topics: CSS transform and transition reference, CSS filter effects.