CSS Animation & Keyframes — Web Development Class 37

Class 037 — CSS Animation & Keyframes

CSS Animation allows you to create movement and visual changes without requiring JavaScript for every effect.

Unlike a basic transition, which usually moves between a starting state and an ending state, CSS animations can contain multiple stages using @keyframes.

The core idea of this class from the master course is:

@keyframes creates multi-step animations.
Animation should be purposeful.
Motion should remain accessible.

In this expanded lesson, we will learn how to create, control and use CSS animations correctly in practical websites.

LEARNING OBJECTIVES

After completing this class, you will be able to:

Understand CSS Animation.
Understand @keyframes.
Create multi-step animations.
Use animation-name.
Use animation-duration.
Use animation-timing-function.
Use animation-delay.
Use animation-iteration-count.
Use animation-direction.
Use animation-fill-mode.
Use animation-play-state.
Use animation shorthand.
Create loading animations.
Create entrance effects.
Create pulse and floating effects.
Understand the difference between Transition and Animation.
Create purposeful and accessible motion.

WHAT IS CSS ANIMATION?

CSS Animation allows CSS property values to change automatically over a period of time.

A CSS animation normally needs two main parts:

@keyframes
Animation properties applied to an element

Example:

.box {
animation-name: moveBox;
animation-duration: 2s;
}

@keyframes moveBox {

from {
    transform: translateX(0);
}

to {
    transform: translateX(200px);
}

}

Here:

moveBox

is the animation name.

The animation starts at:

translateX(0)

and ends at:

translateX(200px)

WHAT IS @KEYFRAMES?

@keyframes defines the stages of a CSS animation.

Basic syntax:

@keyframes animationName {

from {
    property: value;
}

to {
    property: value;
}

}

Example:

@keyframes fadeIn {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

You can then apply it:

.element {
animation-name: fadeIn;
animation-duration: 1s;
}

FROM AND TO

The simplest animation can use:

from

and

Example:

@keyframes grow {

from {
    transform: scale(0.5);
}

to {
    transform: scale(1);
}

}

from represents the starting keyframe.

to represents the ending keyframe.

PERCENTAGE KEYFRAMES

For multi-step animation, percentages can be used.

Example:

@keyframes move {

0% {
    transform: translateX(0);
}

50% {
    transform: translateX(100px);
}

100% {
    transform: translateX(0);
}

}

This animation has three stages:

0% = Starting point

50% = Middle point

100% = Ending point

MULTI-STEP ANIMATION

Example:

@keyframes colorChange {

0% {
    background-color: red;
}

25% {
    background-color: blue;
}

50% {
    background-color: green;
}

75% {
    background-color: orange;
}

100% {
    background-color: red;
}

}

This demonstrates one of the biggest differences between transitions and animations.

CSS Animation can define multiple stages.

ANIMATION-NAME

animation-name specifies which @keyframes animation should be used.

Example:

.box {
animation-name: fadeIn;
}

@keyframes fadeIn {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

The name must match.

Wrong:

.box {
animation-name: fade;
}

@keyframes fadeIn {
}

Correct:

.box {
animation-name: fadeIn;
}

ANIMATION-DURATION

animation-duration defines how long one animation cycle takes.

Example:

.box {
animation-duration: 2s;
}

Common units:

s = seconds

ms = milliseconds

Examples:

animation-duration: 0.5s;

animation-duration: 2s;

animation-duration: 500ms;

Important:

The default animation-duration is 0s.

Therefore, if you forget to provide a duration, the animation may appear to happen instantly.

BASIC FADE-IN

HTML:

Welcome to our website.

CSS:

.message {
animation-name: fadeIn;

animation-duration: 1s;

}

@keyframes fadeIn {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

ANIMATION-TIMING-FUNCTION

animation-timing-function controls how an animation progresses between keyframes.

Common values:

linear

ease

ease-in

ease-out

ease-in-out

Example:

.box {
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease;
}

LINEAR

Example:

animation-timing-function: linear;

The animation progresses at a constant rate between relevant keyframes.

EASE

Example:

animation-timing-function: ease;

The speed changes according to the browser’s predefined ease timing curve.

EASE-IN

Example:

animation-timing-function: ease-in;

The motion starts slowly and accelerates.

EASE-OUT

Example:

animation-timing-function: ease-out;

The motion starts faster and slows toward the end.

EASE-IN-OUT

Example:

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

The animation starts and ends more slowly.

ANIMATION-DELAY

animation-delay defines how long to wait before starting the animation.

Example:

.box {
animation-delay: 1s;
}

Complete example:

.box {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 0.5s;
}

The browser waits 0.5 seconds before beginning the animation.

NEGATIVE ANIMATION DELAY

CSS also allows negative animation-delay values.

Example:

animation-delay: -1s;

This makes the animation behave as if it had already been running for one second when it starts being displayed.

ANIMATION-ITERATION-COUNT

animation-iteration-count defines how many times an animation should repeat.

Example:

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

The animation runs three times.

INFINITE ANIMATION

Example:

.loader {
animation-iteration-count: infinite;
}

This causes the animation to repeat continuously.

Use infinite animations carefully.

Continuous motion can become distracting and may affect usability.

ANIMATION-DIRECTION

animation-direction controls the direction in which animation cycles play.

Common values:

normal

reverse

alternate

alternate-reverse

NORMAL

animation-direction: normal;

The animation plays from start to end.

REVERSE

animation-direction: reverse;

The animation plays in reverse.

ALTERNATE

animation-direction: alternate;

One cycle plays forward.

The next cycle plays backward.

Example:

.box {
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes move {

from {
    transform: translateX(0);
}

to {
    transform: translateX(200px);
}

}

ALTERNATE-REVERSE

Example:

animation-direction: alternate-reverse;

The direction alternates, beginning with the reverse direction.

ANIMATION-FILL-MODE

animation-fill-mode controls how styles from an animation affect the element before or after execution.

Common values:

none

forwards

backwards

both

FORWARDS

Example:

.box {
animation-fill-mode: forwards;
}

After the animation completes, the element retains the styles from the relevant final keyframe.

Example:

.box {
animation:
move 1s forwards;
}

@keyframes move {

from {
    transform: translateX(0);
}

to {
    transform: translateX(100px);
}

}

After completing, the transformed visual state remains.

BACKWARDS

animation-fill-mode: backwards;

During the animation-delay period, styles from the relevant starting keyframe can be applied.

BOTH

animation-fill-mode: both;

Combines forwards and backwards behavior.

ANIMATION-PLAY-STATE

animation-play-state controls whether an animation is running or paused.

Values:

running

paused

Example:

.box {
animation:
rotateBox 2s linear infinite;
}

.box:hover {
animation-play-state: paused;
}

Now the animation pauses when the element is hovered.

ANIMATION SHORTHAND

Instead of writing:

.box {
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}

you can use shorthand:

.box {
animation:
fadeIn 1s ease 0s 1 normal forwards;
}

A simpler common example:

.box {
animation:
fadeIn 1s ease;
}

Another:

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

TRANSITION VS ANIMATION

Transition and Animation are related, but they solve different problems.

TRANSITION

A transition generally requires a property value to change because of a state or other CSS change.

Example:

.button {
transition:
transform 0.3s;
}

.button:hover {
transform:
translateY(-5px);
}

The hover state triggers the change.

ANIMATION

Animation can run automatically and can contain multiple keyframes.

Example:

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

@keyframes spin {

from {
    transform: rotate(0deg);
}

to {
    transform: rotate(360deg);
}

}

Simple rule:

Transition
= Smooth change between states

Animation
= One or more controlled keyframe stages

SPINNING LOADER

HTML:

CSS:

.loader {
width: 50px;
height: 50px;

border: 5px solid #dddddd;

border-top-color: #2563eb;

border-radius: 50%;

animation:
    spin 1s linear infinite;

}

@keyframes spin {

to {
    transform:
        rotate(360deg);
}

}

The loader rotates continuously.

PULSE ANIMATION

HTML: Contact Us

CSS:

.pulse-button {
padding: 14px 28px;

border: none;

border-radius: 8px;

background-color: #2563eb;

color: white;

animation:
    pulse 1.5s ease-in-out infinite;

}

@keyframes pulse {

0% {
    transform: scale(1);
}

50% {
    transform: scale(1.05);
}

100% {
    transform: scale(1);
}

}

Use continuous pulse effects carefully because excessive repetitive motion can distract users.

FLOATING ELEMENT

Example:

.icon {
animation:
float 3s ease-in-out infinite;
}

@keyframes float {

0% {
    transform:
        translateY(0);
}

50% {
    transform:
        translateY(-10px);
}

100% {
    transform:
        translateY(0);
}

}

This creates a floating visual effect.

FADE AND MOVE ANIMATION

Example:

.hero-content {
animation:
fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {

from {
    opacity: 0;

    transform:
        translateY(30px);
}

to {
    opacity: 1;

    transform:
        translateY(0);
}

}

This is a useful entrance animation.

SLIDE-IN ANIMATION

Example:

.sidebar {
animation:
slideIn 0.5s ease;
}

@keyframes slideIn {

from {
    opacity: 0;

    transform:
        translateX(-50px);
}

to {
    opacity: 1;

    transform:
        translateX(0);
}

}

BOUNCE EXAMPLE

Example:

.arrow {
animation:
bounce 1s ease-in-out infinite;
}

@keyframes bounce {

0%,
100% {
    transform:
        translateY(0);
}

50% {
    transform:
        translateY(-8px);
}

}

MULTIPLE SELECTORS IN KEYFRAMES

You can group keyframe percentages.

Example:

@keyframes bounce {

0%,
100% {
    transform:
        translateY(0);
}

50% {
    transform:
        translateY(-10px);
}

}

This avoids repeating identical declarations.

MULTIPLE ANIMATIONS

An element can use more than one animation.

Example:

.box {
animation:
fadeIn 1s ease,
moveUp 1s ease;
}

@keyframes fadeIn {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

@keyframes moveUp {

from {
    transform:
        translateY(30px);
}

to {
    transform:
        translateY(0);
}

}

However, be careful when multiple animations modify the same CSS property because they can interact or override each other.

PRACTICAL CARD ENTRANCE

HTML:

<article class="card">
    HTML
</article>

<article class="card">
    CSS
</article>

<article class="card">
    JavaScript
</article>

CSS:

.cards {
display: grid;

grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px, 1fr)
    );

gap: 24px;

}

.card {
padding: 30px;

border: 1px solid #dddddd;

border-radius: 12px;

animation:
    cardEntrance 0.6s ease both;

}

@keyframes cardEntrance {

from {
    opacity: 0;

    transform:
        translateY(20px);
}

to {
    opacity: 1;

    transform:
        translateY(0);
}

}

STAGGERED ANIMATION

Different elements can have different delays.

Example:

.card:nth-child(1) {
animation-delay: 0s;
}

.card:nth-child(2) {
animation-delay: 0.15s;
}

.card:nth-child(3) {
animation-delay: 0.3s;
}

This creates a staggered entrance effect.

Important:

Keep delays short enough that users are not forced to wait for important content.

ANIMATING TRANSFORM AND OPACITY

For many UI effects, transform and opacity are useful animation properties.

Example:

@keyframes enter {

from {
    opacity: 0;

    transform:
        translateY(20px);
}

to {
    opacity: 1;

    transform:
        translateY(0);
}

}

These properties are commonly suitable for smooth visual motion.

Performance still depends on the complete webpage, browser and device.

ACCESSIBLE MOTION

The master course specifically notes that motion should be purposeful and accessible.

Animations should not exist only because animation is possible.

Good motion can:

Show feedback.
Explain a state change.
Guide attention.
Communicate progress.
Improve perceived continuity.

Bad motion can:

Distract users.
Make content harder to read.
Delay important information.
Cause discomfort for motion-sensitive users.

PREFERS-REDUCED-MOTION

CSS can respect the user’s reduced-motion preference.

Example:

.card {
animation:
fadeUp 0.8s ease;
}

@media (prefers-reduced-motion: reduce) {

.card {
    animation: none;
}

}

For a larger site:

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

}

In production projects, reduced-motion behavior should be designed intentionally rather than applied blindly.

DO NOT ANIMATE EVERYTHING

A professional website does not need every heading, paragraph, button and image moving continuously.

Use animation where it provides a clear benefit.

Good examples:

Loading indicator
Menu opening feedback
Modal entrance
Notification appearance
Progress indicator
Subtle hero entrance

Avoid unnecessary:

Constantly moving text
Large repetitive movement
Flashing effects
Long animations before users can interact

FULL PRACTICAL EXAMPLE

HTML:

<meta charset="UTF-8">

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>

<title>
    CSS Animation and Keyframes
</title>

<link
    rel="stylesheet"
    href="style.css"
>

<section class="hero">

    <div class="hero-content">

        <h1>
            Learn Web Development
        </h1>

        <p>
            Build modern and professional websites.
        </p>

        <a href="#" class="button">
            Start Learning
        </a>

    </div>

</section>


<section class="courses">

    <article class="card">
        HTML
    </article>

    <article class="card">
        CSS
    </article>

    <article class="card">
        JavaScript
    </article>

</section>


<div class="loader"></div>

CSS:

{
box-sizing: border-box;
}

body {
margin: 0;

font-family:
    Arial,
    sans-serif;

}

.hero {
min-height: 70vh;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

padding: 40px;

}

.hero-content {
animation:
heroEntrance 0.8s ease both;
}

@keyframes heroEntrance {

from {
    opacity: 0;

    transform:
        translateY(30px);
}

to {
    opacity: 1;

    transform:
        translateY(0);
}

}

.button {
display: inline-block;

padding: 12px 24px;

background-color: #2563eb;

color: white;

text-decoration: none;

border-radius: 8px;

}

.courses {
display: grid;

grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px, 1fr)
    );

gap: 24px;

padding: 60px 5%;

}

.card {
padding: 30px;

border: 1px solid #dddddd;

border-radius: 12px;

animation:
    cardEntrance 0.6s ease both;

}

.card:nth-child(2) {
animation-delay: 0.15s;
}

.card:nth-child(3) {
animation-delay: 0.3s;
}

@keyframes cardEntrance {

from {
    opacity: 0;

    transform:
        translateY(20px);
}

to {
    opacity: 1;

    transform:
        translateY(0);
}

}

.loader {
width: 50px;
height: 50px;

margin: 40px auto;

border: 5px solid #dddddd;

border-top-color: #2563eb;

border-radius: 50%;

animation:
    spin 1s linear infinite;

}

@keyframes spin {

to {
    transform:
        rotate(360deg);
}

}

@media (prefers-reduced-motion: reduce) {

.hero-content,
.card,
.loader {
    animation: none;
}

}

CODE EXPLANATION

.hero-content {
animation:
heroEntrance 0.8s ease both;
}

The hero uses the heroEntrance keyframes.

Duration:

0.8 seconds

Timing function:

ease

Fill mode:

both

@keyframes heroEntrance

defines the different stages of the hero entrance.

.card:nth-child(2)

and:

.card:nth-child(3)

use animation-delay to create staggered timing.

.loader

uses:

animation:
spin 1s linear infinite;

This means:

Animation name = spin

Duration = 1 second

Timing = linear

Iteration count = infinite

COMMON MISTAKES

FORGETTING @KEYFRAMES

Wrong:

.box {
animation:
move 1s;
}

without defining:

@keyframes move

Correct:

@keyframes move {

from {
    transform:
        translateX(0);
}

to {
    transform:
        translateX(100px);
}

}

ANIMATION NAME DOES NOT MATCH

Wrong:

.box {
animation-name: move;
}

@keyframes moving {
}

Correct:

.box {
animation-name: move;
}

@keyframes move {
}

FORGETTING ANIMATION DURATION

The default duration is 0s.

Example:

.box {
animation-name: fadeIn;
}

may appear to complete immediately.

Use:

.box {
animation:
fadeIn 1s;
}

CONFUSING TRANSITION WITH ANIMATION

Transition:

Usually handles a change between states.

Animation:

Can run automatically and define multiple keyframe stages.

USING INFINITE ANIMATION EVERYWHERE

Continuous motion can distract users.

Use:

animation-iteration-count: infinite;

only when continuous movement has a useful purpose.

CREATING VERY LONG ENTRANCE ANIMATIONS

Users should not have to wait several seconds before important content becomes usable.

ANIMATING TOO MANY ELEMENTS

Heavy or unnecessary animation can reduce usability and performance.

IGNORING REDUCED MOTION

Consider:

prefers-reduced-motion

when meaningful motion is present.

USING MOTION WITHOUT PURPOSE

Animation should communicate or improve an interaction, not simply decorate everything.

FLASHING OR EXTREME MOTION

Avoid effects that can make content uncomfortable or difficult to use.

NEW & DIFFICULT WORDS

CSS = Cascading Style Sheets.

Animation = Visual change that occurs over time.

Keyframe = A defined stage of an animation.

@keyframes = CSS at-rule used to define animation stages.

Animation Name = Name connecting an element with a @keyframes rule.

Animation Duration = Time required for one animation cycle.

Timing Function = Controls how intermediate animation values progress.

Animation Delay = Waiting time before an animation starts.

Iteration Count = Number of times an animation repeats.

Infinite = Continues without a fixed number of repetitions.

Animation Direction = Defines the direction in which animation cycles run.

Fill Mode = Defines how keyframe styles affect an element outside active animation time.

Play State = Controls whether an animation is running or paused.

Transform = CSS feature for moving, scaling, rotating or skewing an element.

Opacity = Transparency level of an element.

Motion = Visual movement in an interface.

Reduced Motion = User preference requesting reduced non-essential motion.

Staggered Animation = Multiple related animations starting at slightly different times.

Purposeful Motion = Animation used for a specific usability or communication purpose.

Accessibility = Designing content and interfaces so they can be used by people with different abilities and needs.

IMPORTANT NOTES

Basic animation:

.element {
animation:
fadeIn 1s ease;
}

Basic keyframes:

@keyframes fadeIn {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

Multi-step:

@keyframes move {

0% {
    transform:
        translateX(0);
}

50% {
    transform:
        translateX(100px);
}

100% {
    transform:
        translateX(0);
}

}

Infinite:

animation:
spin 1s linear infinite;

Pause:

animation-play-state:
paused;

Keep final keyframe:

animation-fill-mode:
forwards;

Remember:

@keyframes
= Defines animation stages

animation
= Applies and controls the animation

Most importantly:

Motion should be purposeful and accessible.

PRACTICE

Create a fade-in animation.
Create a move animation.
Create a scale animation.
Create a rotate animation.
Use from and to.
Create 0%, 50% and 100% keyframes.
Use animation-name.
Use animation-duration.
Test linear.
Test ease.
Test ease-in.
Test ease-out.
Test animation-delay.
Run an animation three times.
Create an infinite animation.
Test animation-direction: reverse.
Test animation-direction: alternate.
Use animation-fill-mode: forwards.
Pause an animation on hover.
Create a loading spinner.
Create a pulse effect.
Create a floating effect.
Create a fade-and-slide entrance.
Create staggered card animations.
Add prefers-reduced-motion support.

ASSIGNMENT

Create a webpage called:

CSS Animation & Keyframes Practice

The webpage should contain:

Header
Hero section
Navigation
CTA button
Service cards
Product cards
Loading indicator
Footer

Requirements:

Use @keyframes.
Use from and to.
Use percentage keyframes.
Use animation-name.
Use animation-duration.
Use animation-timing-function.
Use animation-delay.
Use animation-iteration-count.
Use animation-direction.
Use animation-fill-mode.
Use animation-play-state.
Use animation shorthand.
Create one entrance animation.
Create one multi-step animation.
Create one loader.
Add reduced-motion support.

MINI PROJECT

Create an animated course section.

HTML:

<article class="course-card">
    <h2>HTML</h2>
    <p>Learn website structure.</p>
</article>

<article class="course-card">
    <h2>CSS</h2>
    <p>Learn website styling.</p>
</article>

<article class="course-card">
    <h2>JavaScript</h2>
    <p>Learn website interactivity.</p>
</article>

CSS:

.courses {
display: grid;

grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px, 1fr)
    );

gap: 24px;

}

.course-card {
padding: 30px;

border: 1px solid #dddddd;

border-radius: 12px;

animation:
    fadeUp 0.6s ease both;

}

.course-card:nth-child(2) {
animation-delay:
0.15s;
}

.course-card:nth-child(3) {
animation-delay:
0.3s;
}

@keyframes fadeUp {

from {
    opacity: 0;

    transform:
        translateY(20px);
}

to {
    opacity: 1;

    transform:
        translateY(0);
}

}

@media (prefers-reduced-motion: reduce) {

.course-card {
    animation: none;
}

}

QUIZ

What is CSS Animation?

Answer:

CSS Animation allows supported CSS property values to change over time according to defined keyframes.

What does @keyframes do?

Answer:

@keyframes defines the stages of a CSS animation.

What are from and to?

Answer:

They represent the starting and ending keyframes of an animation.

Can CSS animations contain more than two stages?

Answer:

Yes. Percentage keyframes such as 0%, 25%, 50%, 75% and 100% can create multi-step animations.

What does animation-duration control?

Answer:

It defines how long one animation cycle takes.

What does animation-delay control?

Answer:

It defines how long to wait before the animation begins.

What does animation-iteration-count do?

Answer:

It defines how many times an animation repeats.

What value makes an animation repeat continuously?

Answer:

infinite

What does animation-direction: alternate do?

Answer:

It alternates the direction of successive animation cycles.

What does animation-fill-mode: forwards do?

Answer:

It keeps the effect of the relevant final keyframe after the animation finishes.

What does animation-play-state: paused do?

Answer:

It pauses the animation.

What is the difference between Transition and Animation?

Answer:

A transition normally smooths a change between CSS states, while an animation can automatically run through multiple stages defined with @keyframes.

Why should animation be accessible?

Answer:

Excessive or unnecessary motion can distract users or cause discomfort, so motion should be purposeful and reduced when appropriate.

INTERVIEW QUESTIONS

Q: What is CSS Animation?

Answer:

CSS Animation allows developers to animate supported CSS properties through one or more stages defined using @keyframes.

Q: What is @keyframes?

Answer:

@keyframes is the CSS at-rule used to define the stages and property values of an animation.

Q: What is animation-duration?

Answer:

It defines the amount of time required for one animation cycle.

Q: What is animation-iteration-count?

Answer:

It defines the number of times an animation should repeat.

Q: What is animation-direction?

Answer:

It controls the direction in which animation cycles play, such as normal, reverse or alternate.

Q: What is animation-fill-mode?

Answer:

It controls how keyframe styles affect an element before and after the active animation period.

Q: What is animation-play-state?

Answer:

It controls whether an animation is running or paused.

Q: What is the difference between a transition and a keyframe animation?

Answer:

A transition interpolates property changes between states, while a keyframe animation can define multiple stages and can run automatically.

Q: Why should developers avoid unnecessary motion?

Answer:

Unnecessary motion can reduce usability, distract users, affect performance and cause discomfort for motion-sensitive users.

CLASS SUMMARY

In Class 37, you learned CSS Animation & Keyframes.

You learned:

CSS Animation
@keyframes
from
to
Percentage keyframes
Multi-step animations
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
animation shorthand
Fade effects
Slide effects
Rotate effects
Loading animations
Pulse effects
Floating effects
Staggered animations
Reduced-motion support
Purposeful and accessible motion

The master file defines the core of this lesson as using keyframes for multi-step animation and keeping motion purposeful and accessible. :contentReference[oaicite:0]{index=0}

Most important basic pattern:

.element {
animation:
fadeIn 1s ease;
}

@keyframes fadeIn {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

NEXT CLASS:

Class 038 — Responsive Web Design

Leave a Reply Cancel reply