What are CSS Animations?

CSS animations allow you to animate the transition of CSS properties over time. They can be used to create smooth, engaging user experiences without requiring JavaScript.

Key Features:

• Performance: Hardware-accelerated animations for smooth performance
• Flexibility: Control timing, easing, and keyframes
• Accessibility: Respect user preferences for reduced motion
• Cross-browser: Excellent browser support
• Declarative: Define animations in CSS, not JavaScript

Understanding Transitions

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

/* Basic transition */
.element {
    background: blue;
    transition: background 0.3s ease;
}

.element:hover {
    background: red;
}

/* Multiple properties */
.element {
    transition: background 0.3s ease, transform 0.5s ease-out;
}

/* All properties */
.element {
    transition: all 0.3s ease;
}

/* Shorthand syntax */
.element {
    transition: property duration timing-function delay;
}

Transition Properties

/* Transition property */
.element {
    transition-property: background, transform;
}

/* Transition duration */
.element {
    transition-duration: 0.3s;
}

/* Transition timing function */
.element {
    transition-timing-function: ease;
    /* Values: ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier() */
}

/* Transition delay */
.element {
    transition-delay: 0.1s;
}

/* Shorthand */
.element {
    transition: background 0.3s ease 0.1s;
}

Understanding Transforms

CSS transforms allow you to modify the coordinate space of the CSS visual formatting model. Using transform, elements can be translated, rotated, scaled, and skewed.

/* Translate (move) */
.element {
    transform: translateX(50px);
    transform: translateY(-20px);
    transform: translate(50px, -20px);
}

/* Scale */
.element {
    transform: scale(1.5);
    transform: scaleX(2);
    transform: scaleY(0.5);
}

/* Rotate */
.element {
    transform: rotate(45deg);
    transform: rotateX(45deg);
    transform: rotateY(45deg);
}

/* Skew */
.element {
    transform: skew(10deg, 5deg);
    transform: skewX(10deg);
    transform: skewY(5deg);
}

Multiple Transforms

/* Combining transforms */
.element {
    transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

/* Transform origin */
.element {
    transform-origin: center;
    transform-origin: top left;
    transform-origin: 50% 50%;
}

/* 3D transforms */
.element {
    transform: rotateX(45deg) rotateY(45deg);
    transform-style: preserve-3d;
    perspective: 1000px;
}

Creating Keyframe Animations

Keyframe animations allow you to create complex animations by defining multiple steps (keyframes) in the animation sequence.

/* Define keyframes */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply animation */
.element {
    animation: slideIn 1s ease-out;
}

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

Animation Properties

/* Animation name */
.element {
    animation-name: slideIn;
}

/* Animation duration */
.element {
    animation-duration: 2s;
}

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

/* Animation delay */
.element {
    animation-delay: 0.5s;
}

/* Animation iteration count */
.element {
    animation-iteration-count: 3;
    animation-iteration-count: infinite;
}

/* Animation direction */
.element {
    animation-direction: alternate;
    /* Values: normal, reverse, alternate, alternate-reverse */
}

/* Animation fill mode */
.element {
    animation-fill-mode: forwards;
    /* Values: none, forwards, backwards, both */
}

/* Animation play state */
.element {
    animation-play-state: paused;
    /* Values: running, paused */
}

/* Shorthand */
.element {
    animation: slideIn 2s ease-in-out 0.5s infinite alternate;
}

Optimizing Animation Performance

Not all CSS properties animate equally well. Some properties trigger layout recalculations, while others can be optimized by the GPU.

High-Performance Properties (GPU-accelerated):

• transform - translate, scale, rotate
• opacity
• filter
• will-change

Avoid These Properties:

• width, height
• margin, padding
• top, left, right, bottom
• display

Performance Best Practices

/* Good: GPU-accelerated */
.element {
    transform: translateX(100px);
    opacity: 0.5;
}

/* Bad: Triggers layout */
.element {
    left: 100px;
    width: 200px;
}

/* Use will-change for optimization */
.element {
    will-change: transform, opacity;
}

/* Use transform3d for hardware acceleration */
.element {
    transform: translate3d(100px, 0, 0);
}

/* Avoid animating layout properties */
.element {
    /* Don't animate these */
    /* width, height, margin, padding, top, left, etc. */
}

Respecting User Preferences

Some users prefer reduced motion due to vestibular disorders or personal preference. Always respect these preferences.

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Alternative: Provide reduced motion version */
.element {
    animation: slideIn 0.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .element {
        animation: none;
        opacity: 1;
    }
}

/* Pause animations on hover for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .element:hover {
        animation-play-state: paused;
    }
}

Animation Guidelines

• Keep it subtle: Animations should enhance, not distract
• Use appropriate timing: 200-400ms for micro-interactions
• Choose the right easing: Use ease-out for entering, ease-in for exiting
• Optimize for performance: Use GPU-accelerated properties
• Respect accessibility: Honor reduced motion preferences
• Test on devices: Ensure smooth performance on mobile
• Provide fallbacks: Don't rely on animations for critical functionality
• Use meaningful animations: Animate purposefully, not just for decoration

Common Animation Patterns

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide in from left */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Scale in */
@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Bounce */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}