CSS Animations

· CSS3 Module

CSS Animations bring life to a webpage.
Without animation, websites feel like still photographs.
With animation, the interface feels alive — buttons breathe, loaders spin, cards slide, menus dance softly into place.

Animation is not only decoration.
Good animation improves user experience, guides attention, and creates smooth interaction.

Think of modern apps:

  • Instagram heart pop effect
  • YouTube loading animation
  • Swiggy sliding menus
  • Flipkart hover effects

All these use animations.

1. Introduction to Animations

What is CSS Animation?

CSS Animation allows HTML elements to:

  • move
  • rotate
  • change color
  • fade
  • resize
  • transform smoothly over time

Instead of changing instantly, the element changes step by step.

Real Life Example

Imagine a traffic signal.

The light changes:

  • Red → Yellow → Green

This happens in sequence over time.

CSS animation works exactly like that.

Difference Between Transition and Animation

Transition Animation
Needs an event (hover, click) Can run automatically
Simple effect Complex multi-step effect
From one state to another Multiple stages possible
Limited control Full control

Example of Transition

button:hover{
    background:red;
}

Changes only on hover.

Example of Animation

animation: moveBox 3s infinite;

Runs continuously without hover.

2. Keyframes

What are Keyframes?

Keyframes define:

  • where animation starts
  • what happens in middle
  • where animation ends

They act like movie scenes.

Syntax

@keyframes animationName {

}

Basic Example

<div class="box"></div>

.box{
    width:100px;
    height:100px;
    background:red;

    animation: moveBox 3s;
}

@keyframes moveBox{
    from{
        transform: translateX(0);
    }

    to{
        transform: translateX(300px);
    }
}

Logic Behind This

Step 1

Animation starts at:

translateX(0)

Step 2

Animation ends at:

translateX(300px)

Step 3

Browser automatically creates smooth movement between them.

Output

The red box moves left to right.

Using Percentage in Keyframes

Instead of only from and to, we can use percentages.

Example

@keyframes colorChange{

    0%{
        background:red;
    }

    50%{
        background:yellow;
    }

    100%{
        background:green;
    }

}

Logic

Percentage Action
0% Start
50% Middle
100% End

Real Example

Traffic signal color changing.

3. Animation Properties

CSS provides several properties to control animation.

A) animation-name

Defines which keyframe to use.

animation-name: moveBox;

B) animation-duration

Defines how long animation runs.

animation-duration: 3s;

Means:

  • animation completes in 3 seconds

C) animation-delay

Wait before animation starts.

animation-delay: 2s;

Animation starts after 2 seconds.

D) animation-iteration-count

How many times animation repeats.

animation-iteration-count: 5;

Runs 5 times.

E) animation-direction

Controls movement direction.

animation-direction: alternate;

Meaning:

  • forward
  • backward
  • forward
  • backward

F) animation-fill-mode

Controls final state.

animation-fill-mode: forwards;

Element stays at final position.

G) animation-play-state

Pause or run animation.

animation-play-state: paused;

Full Example

.box{
    animation-name: moveBox;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Short-Hand Property

Instead of writing everything separately:

animation: moveBox 4s linear infinite alternate;

4. Infinite Animations

Sometimes animations should never stop.

Example:

  • loading spinner
  • bouncing icon
  • heartbeat effect

Syntax

animation-iteration-count: infinite;

Example – Rotating Loader

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

.loader{
    width:80px;
    height:80px;
    border:8px solid lightgray;
    border-top:8px solid blue;
    border-radius:50%;

    animation: spin 1s linear infinite;
}

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

    to{
        transform: rotate(360deg);
    }
}

Logic

The circle rotates continuously:

  • 0 degree → 360 degree
  • infinite times

Real Use

Used in:

  • websites
  • apps
  • payment processing screens

5. Timing Control

Timing controls animation speed behavior.

animation-timing-function

Controls speed style.

Types

Value Meaning
linear Same speed
ease Slow-fast-slow
ease-in Starts slow
ease-out Ends slow
ease-in-out Slow both sides

Example

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

Real Life Understanding

Linear

Like a train moving at constant speed.

Ease-in

Like a bike starting slowly.

Ease-out

Like a car stopping slowly.

Comparison Example

.box1{
    animation: move 3s linear;
}

.box2{
    animation: move 3s ease;
}

The second box feels more natural.

6. Creating Animated Effects

Now let us build real animation effects.

A) Fade In Effect

HTML

<h1>Welcome</h1>

CSS

h1{
    animation: fade 3s;
}

@keyframes fade{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

Logic

Opacity changes:

  • invisible → visible

Real Use

Used in:

  • page loading
  • banners
  • text appearance

B) Bounce Effect

.ball{
    animation: bounce 1s infinite alternate;
}

@keyframes bounce{
    from{
        transform: translateY(0);
    }

    to{
        transform: translateY(-200px);
    }
}

Logic

Element moves:

  • up
  • down
  • up
  • down

C) Pulsing Button

button{
    animation: pulse 1s infinite;
}

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

    50%{
        transform: scale(1.1);
    }

    100%{
        transform: scale(1);
    }
}

Logic

Button becomes:

  • bigger
  • normal
  • bigger

Like heartbeat.

D) Sliding Menu

.menu{
    animation: slide 1s;
}

@keyframes slide{
    from{
        transform: translateX(-300px);
    }

    to{
        transform: translateX(0);
    }
}

Real Use

Used in:

  • sidebars
  • mobile navigation
  • popup panels

Advanced Multi-Step Animation

@keyframes rainbow{

    0%{
        background:red;
    }

    25%{
        background:blue;
    }

    50%{
        background:green;
    }

    75%{
        background:yellow;
    }

    100%{
        background:purple;
    }

}

Logic

Background changes through multiple colors smoothly.

Important Best Practices

1. Avoid Over Animation

Too much animation:

  • distracts users
  • slows websites
  • feels unprofessional

Use animation with purpose.

2. Prefer Transform

Good:

transform: translateX();

Avoid:

left:200px;

Transform is smoother and faster.

3. Keep Duration Balanced

Good range:

  • 0.3s to 1s for UI effects

Too slow feels irritating.

Real Website Examples

Website/App Animation Use
YouTube Loading spinner
Instagram Like animation
Amazon Hover effects
Swiggy Sliding menus
Spotify Animated music bars

Mini Project Example

Animated Notification Bell

<i class="bell">🔔</i>

.bell{
    font-size:50px;
    display:inline-block;

    animation: ring 1s infinite;
}

@keyframes ring{

    0%{
        transform: rotate(0deg);
    }

    25%{
        transform: rotate(20deg);
    }

    50%{
        transform: rotate(-20deg);
    }

    100%{
        transform: rotate(0deg);
    }

}

Learning Outcome

After completing this module, students will be able to:

✅ Understand CSS animations
✅ Create keyframes
✅ Control animation timing
✅ Build smooth animated interfaces
✅ Create loaders, hover effects, sliders, and bouncing elements
✅ Develop modern interactive web designs

Quick Revision

Topic Purpose
@keyframes Defines animation steps
animation-name Select animation
duration Animation time
delay Waiting time
iteration-count Repetition
timing-function Speed control
infinite Endless animation

Final Thought

Animation in web design is like rhythm in poetry.
Without rhythm, words exist.
With rhythm, words breathe.

Similarly:

  • HTML gives structure
  • CSS gives beauty
  • Animation gives life

A well-animated interface speaks silently to the user — smooth, elegant, and memorable.

List of Modules

Anas Khan
Written by