Lesson 13: CSS Animations & Transitions

Why CSS Animations Matter

Animations are more than just visual flair—they improve user experience by providing feedback, guiding attention, and making interfaces feel responsive and alive.

Benefits of CSS Animations:

• Performance: Hardware-accelerated, smooth 60fps animations
• No JavaScript Required: Pure CSS solutions reduce complexity
• Accessibility: Users can disable animations with prefers-reduced-motion
• Declarative: Easier to maintain than imperative JavaScript animations

When to Use Animations:

• Hover states on buttons and links
• Page transitions and loading states
• Drawing attention to important elements
• Providing feedback for user actions
• Creating delightful micro-interactions

CSS Transitions

Transitions allow you to smoothly animate changes between CSS property values. When a property changes (like on hover), the transition interpolates between the old and new values.

Basic Transition Syntax

/* Transition a specific property */
.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

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

/* Transition all properties */
.card {
    transition: all 0.3s ease;
}

/* Transition multiple properties with different timings */
.box {
    transition: 
        transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        opacity 0.2s ease,
        background-color 0.5s linear;
}

Transition Properties

.element {
    /* Shorthand: property duration timing-function delay */
    transition: transform 0.3s ease-in-out 0.1s;
    
    /* Or use individual properties */
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.1s;
}

Timing Functions and Easing

Timing functions control the pace of an animation. They determine how intermediate values are calculated during the transition.

Built-in Timing Functions

/* Linear - constant speed */
transition: all 0.3s linear;

/* Ease - slow start, fast middle, slow end (default) */
transition: all 0.3s ease;

/* Ease-in - slow start, fast end */
transition: all 0.3s ease-in;

/* Ease-out - fast start, slow end */
transition: all 0.3s ease-out;

/* Ease-in-out - slow start and end */
transition: all 0.3s ease-in-out;

Custom Cubic Bezier

/* Create custom easing curves */
.bounce {
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.smooth-slide {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Use https://cubic-bezier.com to create custom curves */

Step Timing Function

/* Jump in discrete steps (useful for sprite animations) */
.sprite {
    transition: background-position 0.8s steps(8);
}

2D Transforms

Transforms allow you to move, rotate, scale, and skew elements in 2D space. Transforms are performant because they don't trigger layout recalculation.

Transform Functions

/* Translate - move element */
transform: translate(50px, 100px);  /* X, Y */
transform: translateX(50px);
transform: translateY(100px);

/* Scale - resize element */
transform: scale(1.5);       /* Uniform scaling */
transform: scale(2, 0.5);    /* X, Y */
transform: scaleX(2);
transform: scaleY(0.5);

/* Rotate - rotate element */
transform: rotate(45deg);
transform: rotate(-30deg);

/* Skew - slant element */
transform: skew(20deg, 10deg);  /* X, Y */
transform: skewX(20deg);
transform: skewY(10deg);

Combining Transforms

/* Multiple transforms are applied right to left */
.element {
    /* Rotate, then translate, then scale */
    transform: scale(1.2) translate(50px, 0) rotate(15deg);
}

/* Transform origin - change the pivot point */
.element {
    transform-origin: top left;  /* Default is center */
    transform: rotate(45deg);
}

Keyframe Animations

Keyframe animations allow you to create complex, multi-stage animations with precise control over each stage. Unlike transitions, animations can run automatically without a trigger.

Defining Keyframes

/* Using from/to keywords */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Using percentages for multi-stage animation */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Complex animation with multiple properties */
@keyframes slideInBounce {
    0% {
        opacity: 0;
        transform: translateX(-100px) scale(0.8);
    }
    60% {
        transform: translateX(10px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

Applying Animations

/* Shorthand syntax */
.element {
    animation: fadeIn 0.5s ease-in-out 0.2s 1 normal forwards;
    /* name | duration | timing | delay | iteration | direction | fill-mode */
}

/* Individual properties */
.element {
    animation-name: slideInBounce;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation-delay: 0s;
    animation-iteration-count: 1;      /* or 'infinite' */
    animation-direction: normal;       /* or 'reverse', 'alternate', 'alternate-reverse' */
    animation-fill-mode: forwards;     /* or 'backwards', 'both', 'none' */
    animation-play-state: running;     /* or 'paused' */
}

Animation Properties

Fill Mode

Controls what happens before and after the animation runs:

/* none - no styles applied outside animation */
animation-fill-mode: none;

/* forwards - retain final keyframe styles */
animation-fill-mode: forwards;

/* backwards - apply initial keyframe styles during delay */
animation-fill-mode: backwards;

/* both - apply both forwards and backwards */
animation-fill-mode: both;

Direction

/* normal - play forward */
animation-direction: normal;

/* reverse - play backward */
animation-direction: reverse;

/* alternate - forward then backward */
animation-direction: alternate;

/* alternate-reverse - backward then forward */
animation-direction: alternate-reverse;

Iteration Count

/* Run once */
animation-iteration-count: 1;

/* Run 3 times */
animation-iteration-count: 3;

/* Run forever */
animation-iteration-count: infinite;

3D Transforms and Perspective

CSS 3D transforms allow you to create depth and dimension. Combined with perspective, you can create truly three-dimensional effects.

Perspective

/* Perspective on parent creates shared 3D space */
.scene {
    perspective: 1000px;  /* Lower = more extreme perspective */
}

/* Perspective on element itself */
.element {
    transform: perspective(1000px) rotateY(45deg);
}

3D Transform Functions

/* 3D Translation */
transform: translate3d(50px, 100px, -200px);
transform: translateZ(-200px);

/* 3D Rotation */
transform: rotateX(45deg);   /* Rotate around X axis */
transform: rotateY(45deg);   /* Rotate around Y axis */
transform: rotateZ(45deg);   /* Same as rotate() */
transform: rotate3d(1, 1, 0, 45deg);  /* Custom axis */

/* 3D Scale */
transform: scale3d(1.5, 1.5, 2);
transform: scaleZ(2);

Transform Style

/* Preserve 3D - children maintain 3D positioning */
.parent {
    transform-style: preserve-3d;
}

/* Flat (default) - children are flattened to parent plane */
.parent {
    transform-style: flat;
}

Backface Visibility

/* Hide element when rotated away from viewer */
.card-face {
    backface-visibility: hidden;
}

/* Show backface (default) */
.card-face {
    backface-visibility: visible;
}

The Checkbox Hack

The "checkbox hack" is a technique that uses hidden checkboxes combined with the :checked pseudo-class to create interactive components without JavaScript.

How It Works

<input type="checkbox" id="toggle" class="toggle-checkbox">
<label for="toggle" class="toggle-label">Click to toggle</label>
<div class="toggle-content">
    This content is toggled!
</div>

/* Hide the checkbox */
.toggle-checkbox {
    display: none;
}

/* Style the label as a button */
.toggle-label {
    display: inline-block;
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    cursor: pointer;
    border-radius: 4px;
}

/* Hide content by default */
.toggle-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Show content when checkbox is checked */
.toggle-checkbox:checked ~ .toggle-content {
    max-height: 500px;  /* Large enough for content */
}

/* Change label when checked */
.toggle-checkbox:checked ~ .toggle-label {
    background: #10b981;
}

The :target Pseudo-Class

The :target pseudo-class selects an element when the URL's fragment identifier (hash) matches that element's ID. This enables pure CSS modals, tabs, and navigation.

Basic Usage

<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>

/* Hide all sections by default */
div[id^="section"] {
    display: none;
}

/* Show the targeted section */
div[id^="section"]:target {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

Pure CSS Modal

/* Hide modal by default */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

/* Show modal when targeted */
.modal:target {
    display: flex;
    animation: fadeIn 0.3s ease;
}

Animation Performance

Not all CSS properties are created equal when it comes to animation performance. Some properties trigger expensive layout and paint operations.

Performance Tiers

• ✅ Excellent (GPU-accelerated): transform, opacity
• ⚠️ OK (causes repaint): color, background-color, box-shadow
• ❌ Poor (causes layout): width, height, top, left, margin, padding

Optimization Tips

/* ❌ Bad - animates layout-triggering properties */
.slow {
    transition: width 0.3s, height 0.3s, left 0.3s;
}

/* ✅ Good - uses transform instead */
.fast {
    transition: transform 0.3s, opacity 0.3s;
}

/* Use will-change to hint browser optimization */
.animated {
    will-change: transform, opacity;
}

/* Remove will-change after animation */
.animated.animation-done {
    will-change: auto;
}

Prefer Transform Over Position

/* ❌ Slow - changes layout */
@keyframes slideInSlow {
    from { left: -100px; }
    to { left: 0; }
}

/* ✅ Fast - uses transform */
@keyframes slideInFast {
    from { transform: translateX(-100px); }
    to { transform: translateX(0); }
}

Respect User Preferences

/* Reduce or disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

Summary

In this lesson, you learned:

• CSS transitions for smooth property changes
• Timing functions and custom easing curves
• 2D transforms: translate, rotate, scale, skew
• Keyframe animations with precise control
• Animation properties: duration, delay, iteration, direction, fill-mode
• 3D transforms with perspective
• The checkbox hack for pure CSS interactivity
• The :target pseudo-class for modals and tabs
• Performance optimization techniques
• Building common UI patterns (accordions, modals, spinners)

CSS animations and transforms are powerful tools for creating engaging user experiences. By understanding performance implications and respecting user preferences, you can create delightful interactions that enhance your websites.