CSS Animations

Creating complex animations with keyframes and animation properties

🎬 What are CSS Animations?

CSS animations allow you to animate CSS properties over time using keyframes. Unlike transitions, animations can run automatically and have multiple steps. 


/* Simple animation example */
@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

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

Output:

Animation Properties

🎯

Name

References the @keyframes rule 

animation-name: slideIn;
⏱️

Duration

How long the animation takes 

animation-duration: 2s;
🔄

Iteration Count

How many times to repeat 

animation-iteration-count: infinite;
📈

Timing Function

Speed curve of animation 

animation-timing-function: ease-in-out;

🔹 Creating Keyframes

Keyframes are the foundation of CSS animations, defining the specific stages (from 0% to 100%) and styles of an animation sequence. Using the @keyframes rule, you specify how an element's properties should change at various points in time. For example, @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }. This provides granular control over animation flow, enabling complex multi-step motion. Well-defined keyframes are essential for creating smooth, performant animations that enhance user experience, guide attention, and provide meaningful feedback. They are a powerful tool for storytelling and interaction on the web, directly impacting engagement metrics. 

/* Percentage-based keyframes */
@keyframes slideInRight {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* From/To keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

Output:

Sliding Text

🔹 Animation Shorthand

The animation shorthand property efficiently combines up to eight sub-properties—like name, duration, and timing function—into a single, readable declaration. The basic syntax is animation: name duration timing-function delay iteration-count direction fill-mode play-state;. For instance, animation: slideIn 1s ease-in-out 0s 1 normal both running;. This shorthand improves code maintainability and reduces file size, contributing to better website performance and SEO rankings. It allows developers to quickly implement and modify complex animations while keeping stylesheets organized. Understanding the order of values is crucial for leveraging this powerful shorthand correctly in production projects. 

/* Shorthand syntax */
.element {
    animation: name duration timing-function delay iteration-count direction fill-mode;
}

/* Example */
.rotating-square {
    animation: rotate 3s linear infinite;
}

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

Output:

🔹 Advanced Animation Examples

🔸 Pulse Effect 

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
    }
}

.pulse-button {
    animation: pulse 2s infinite;
}

Output:

🔸 Loading Spinner 

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

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

Output:

🔸 Text Typing Effect 

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

.typewriter {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #333;
    animation: typing 3s steps(20) 1s forwards, blink 0.5s step-end infinite;
}

🔹 Animation Control

Advanced CSS animation control involves managing playback state, iteration count, direction, and fill mode to create precise and interactive motion experiences. Properties like animation-play-state (pausing/resuming), animation-iteration-count (finite or infinite), and animation-direction (reverse, alternate) offer fine-tuned command. The animation-fill-mode determines if styles apply before/after execution. These controls are vital for building user-triggered animations, creating seamless loops, or ensuring an element holds its final state. Proper use enhances usability and performance, preventing jank and ensuring animations respect user preferences like prefers-reduced-motion, which is important for accessibility and core web vitals.

Animation Properties:

  • animation-play-state: running | paused
  • animation-direction: normal | reverse | alternate
  • animation-fill-mode: none | forwards | backwards | both
  • animation-delay: Wait time before starting

🧠 Test Your Knowledge

What CSS rule is used to define animation steps?