Unicorn Platform

World's best and simplest website builder powered by AI

Build your website
Sunday, August 25, 2024

CSS Keyframe Animation: Complete Guide

CSS keyframe animations let you create smooth, multi-step animations without JavaScript. Here's what you need to know:

  • Use @keyframes to define animation stages
  • Control timing, duration, and behavior with animation properties
  • Widely supported in modern browsers
  • Best for UI animations and simple effects

Key benefits: • Hardware-accelerated performance • Easier to implement than JavaScript • Keeps SVG files smaller

Quick tips:

  1. Animate transform and opacity for smoothness
  2. Use will-change to hint at changes
  3. Avoid animating too many elements at once
  4. Add reduced motion support for accessibility
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.element {
  animation: slide 2s ease infinite;
}

This guide covers everything from basic concepts to advanced techniques for creating engaging CSS animations.

How keyframe animations work

Keyframe animations in CSS let you create complex, multi-step animations. They work by defining styles at various points in an animation sequence.

Keyframe basics

The core is the @keyframes rule. It specifies the animation code:

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

This defines a "bounce" animation with three stages. To apply it:

.bouncing-element {
  animation: bounce 2s infinite;
}

Keyframes vs. transitions

Feature Keyframes Transitions
Complexity Multiple steps Two states
Control Fine-grained Limited
Trigger Can auto-run Needs trigger
Repetition Can loop Once per trigger

Keyframes are better for complex effects. For example, a spinner:

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

Writing keyframe animations

Using @keyframes

The @keyframes rule defines animation stages:

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

Setting animation stages

Use percentages or keywords:

@keyframes color-change {
  0% { background-color: red; }
  33% { background-color: blue; }
  66% { background-color: green; }
  100% { background-color: red; }
}

Naming your animations

Choose clear names:

.element {
  animation: bounce 2s infinite;
}

You can animate multiple properties:

@keyframes grow-and-spin {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 0.5;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

Key animation properties

1. animation-name

.element {
  animation-name: bounce;
}

2. animation-duration

.element {
  animation-duration: 2s;
}

3. animation-timing-function

.element {
  animation-timing-function: ease-in-out;
}

4. animation-delay

.element {
  animation-delay: 0.5s;
}

5. animation-iteration-count

.element {
  animation-iteration-count: 3;
}

6. animation-direction

7. animation-fill-mode

8. animation-play-state

.element {
  animation-play-state: paused;
}

9. animation (shorthand)

.element {
  animation: bounce 2s ease-in-out 0.5s infinite alternate;
}

Making simple animations

Moving elements

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

.sliding-element {
  animation: slide 2s ease infinite;
}

Changing colors and opacity

@keyframes fade {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.fading-element {
  animation: fade 3s linear infinite;
}

Scaling and rotating

@keyframes grow-and-spin {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.5) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.growing-spinning-element {
  animation: grow-and-spin 4s ease-in-out infinite;
}

Combine multiple animations:

.multi-animated {
  animation: 
    slide 2s ease infinite,
    fade 3s linear infinite,
    grow-and-spin 4s ease-in-out infinite;
}

Complex animation techniques

Multi-step animations

@keyframes progress-bar {
    0% { transform: scaleX(0); }
    17% { transform: scaleX(.18); }
    24% { transform: scaleX(.4); }
    46% { transform: scaleX(.81); }
    100% { transform: scaleX(1); }
}

.progress {
    animation: progress-bar 3s ease-in-out;
}

Mixing different properties

@keyframes complex-animation {
    0% {
        transform: translateX(0) scale(1);
        background-color: red;
        opacity: 0.5;
    }
    50% {
        transform: translateX(100px) scale(1.5);
        background-color: blue;
        opacity: 0.8;
    }
    100% {
        transform: translateX(200px) scale(1);
        background-color: green;
        opacity: 1;
    }
}

.animated-element {
    animation: complex-animation 4s ease-in-out infinite;
}

Custom timing with cubic-bezier

.custom-timing {
    animation: slide-in 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
sbb-itb-b5a6996

Making animations run faster

Smooth animation tips

  1. Use transform and opacity
  2. Avoid layout-triggering properties
  3. Use requestAnimationFrame()
  4. Delay animations on page load

Using GPU acceleration

  1. Use will-change
  2. Force GPU rendering with translateZ(0)
  3. Be cautious with memory usage

Browser support and backups

Browser compatibility

Most modern browsers support CSS animations. For older browsers, use vendor prefixes:

@-webkit-keyframes myAnimation {
  /* Keyframes */
}
@keyframes myAnimation {
  /* Keyframes */
}

.animated-element {
  -webkit-animation: myAnimation 1s ease-in-out;
  animation: myAnimation 1s ease-in-out;
}

Fallback options

  1. Provide static content
  2. Use JavaScript alternatives
  3. Use feature detection
  4. Design for graceful degradation

Fixing animation problems

Common issues and fixes

  1. Check @keyframes and animation-name
  2. Set non-zero animation-duration
  3. Use animation-fill-mode: forwards
  4. Stick to transform and opacity

Tools for checking animations

Use browser developer tools to debug animations.

Adding JavaScript to animations

JavaScript

Controlling animations with code

// Start
element.classList.add('animate');

// Pause/Resume
element.style.animationPlayState = 'paused';
element.style.animationPlayState = 'running';

// Change speed
element.style.animationDuration = '5s';

Responding to animation events

element.addEventListener('animationstart', () => {
  console.log('Animation started');
});

element.addEventListener('animationend', () => {
  console.log('Animation finished');
});

Practical uses of keyframe animations

  • Show state changes
  • Provide feedback
  • Guide attention
  • Create spatial awareness

Tips for better animations

  • Group related animations
  • Use descriptive names
  • Comment complex animations
  • Create reusable animations
  • Consider accessibility

Remember to test your animations across different browsers and devices for the best user experience.