The Ultimate CSS Animation Properties Cheat Sheet

Introduction: What Are CSS Animations?

CSS animations allow web developers to create smooth, engaging transitions and movements without JavaScript or Flash. They enable elements to gradually change from one style to another, enhancing user experience and adding visual interest to web pages. CSS animations are:

• Performance efficient – hardware-accelerated in modern browsers
• Declarative – defined entirely in CSS without scripting
• Customizable – with precise timing, duration, and behavior controls
• Accessible – can respect user preferences for reduced motion

Core Animation Concepts

The Two Animation Systems in CSS

CSS Transitions Properties

Timing Functions

CSS @keyframes Animations

Basic Syntax

@keyframes animationName {
  from {
    /* starting styles */
  }
  to {
    /* ending styles */
  }
}

/* OR with percentage-based keyframes */
@keyframes animationName {
  0% {
    /* starting styles */
  }
  50% {
    /* middle styles */
  }
  100% {
    /* ending styles */
  }
}

Animation Properties

Animation Direction Values

Animation Fill Mode Values

Step-by-Step: Creating CSS Animations

Method 1: Simple Transition

1. Select the element with CSS
2. Define its default state
3. Define its changed state (e.g., on hover)
4. Add transition properties to control the animation

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

Method 2: Keyframe Animation

1. Define the @keyframes animation sequence
2. Select the element with CSS
3. Apply the animation properties to the element

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

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

Animatable CSS Properties

Not all CSS properties can be animated. Here are the most commonly animated properties:

Transform Properties

• transform: translate(x, y) – Move horizontally/vertically
• transform: scale(x, y) – Resize horizontally/vertically
• transform: rotate(deg) – Rotate by degrees
• transform: skew(x-deg, y-deg) – Skew along X/Y axis

Visual Properties

• opacity – Transparency
• color – Text color
• background-color – Background color
• box-shadow – Shadow effects
• border-color – Border color
• border-width – Border width

Spatial Properties

• width / height – Dimensions
• margin / padding – Spacing
• top / left / right / bottom – Positioning

Common Animation Challenges and Solutions

Best Practices and Tips

Performance Optimization

• Stick to transform and opacity for smooth animations (these don’t trigger layout)
• Avoid animating layout properties (width, height, padding, margin) when possible
• Use will-change sparingly to hint browser about properties that will animate
• Limit the number of animated elements on screen at once

Code Organization

• Name keyframes semantically based on their purpose (e.g., fadeIn, slideUp)
• Use CSS variables for animation values that repeat or might change
• Group related animations with similar timing or purpose

Accessibility

• Always provide alternatives to motion-based interactions
• Respect user preferences with prefers-reduced-motion media query:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

Browser Compatibility

• Use vendor prefixes or autoprefixer for older browsers
• Test across browsers as animation support varies
• Provide fallbacks for browsers without animation support

Common Animation Examples

Fade In

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in-out;
}

Bounce

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.element {
  animation: bounce 2s infinite;
}

Pulse

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.element {
  animation: pulse 2s infinite;
}

Spinner

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

Resources for Further Learning

Documentation

• MDN Web Docs: CSS Animations
• MDN Web Docs: Using CSS Transitions
• W3C CSS Animations Specification

Tools

• Animista – Pre-made CSS animations
• Cubic-Bezier.com – Custom timing function generator
• Keyframes.app – Visual animation generator

Tutorials

• CSS-Tricks: Animation Guide
• web.dev: Animations Guide
• CSS Animation Rocks