Chapter 22 | Motion Effects

CSS Transitions & Animations

Transitions and animations make a webpage feel smooth, interactive and premium. In this chapter, you will learn hover effects, transform, keyframes and animation properties.

Start Learning Try Animation

transition

Smoothly changes CSS property values.

transform

Moves, scales, rotates or skews elements.

@keyframes

Defines steps of an animation.

animation

Runs repeated or timed motion effects.

Learning Objectives

After This Chapter, You Will Understand

This chapter teaches smooth and professional motion effects for webpages.

Transitions

Create smooth changes on hover and focus.

Transform

Move, scale and rotate webpage elements.

Keyframes

Define animation steps from start to end.

Animation

Run automatic motion effects on elements.

Motion Meaning

Why Use Transitions and Animations?

Motion effects make interactions smoother and help guide user attention.

1 Simple Meaning

A transition creates a smooth change between two states, such as normal button and hover button. An animation runs through a sequence of styles using keyframes.

Difference: Transition usually needs a trigger like hover. Animation can run automatically using keyframes.

Professional Tip: Use motion subtly. Smooth effects improve design, but too many animations can distract users.

2 Common Uses

Button hover effects
Card lift effects
Menu opening effects
Loading indicators
Attention-grabbing badges
Hero section movement

CSS Transitions

transition Property

The transition property makes style changes smooth instead of sudden.

3 Basic Syntax

.button {
  background: #06285f;
  transition: all 0.3s ease;
}

.button:hover {
  background: #ff7a1a;
}

Hover the Button

The button changes color, moves up and gets a shadow smoothly.

Transition Part	Meaning	Example
Property	Which CSS property should animate	background, transform, all
Duration	How long the transition takes	0.3s, 500ms
Timing Function	Speed style of transition	ease, linear, ease-in-out
Delay	Wait time before transition starts	0.2s

CSS Transform

Move, Scale and Rotate Elements

The transform property changes the shape or position of an element visually.

translate()

transform: translateY(-6px);

scale()

Hover

transform: scale(1.12);

rotate()

Hover

transform: rotate(10deg);

Quick Memory: translate moves, scale resizes, rotate turns, skew tilts.

Keyframes

@keyframes Rule

Keyframes define the steps of an animation from start to end.

4 Keyframes Syntax

@keyframes floatBox {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

Floating Animation

Float

This animation moves the element up and down repeatedly.

CSS Animation

Animation Properties

Animation properties connect an element with keyframes and control timing.

Property	Use	Example
animation-name	Name of keyframes	floatBox
animation-duration	How long one animation cycle takes	2s
animation-timing-function	Speed style	ease-in-out
animation-iteration-count	How many times animation runs	infinite, 3
animation-direction	Direction of animation	normal, alternate

Float

animation: floatBox 2s ease-in-out infinite;

Pulse

animation: pulseBox 1.6s ease-in-out infinite;

Slide

animation: slideBox 1.8s ease-in-out infinite alternate;

Try It Yourself

Practice Transitions and Animations

Edit transition, transform and animation values to see the effect.

HTML + CSS Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Animation Practice</title>
    <style>
        body{
            font-family:Arial;
            background:#f5f9ff;
            padding:30px;
        }

.card{
            background:white;
            padding:30px;
            border-radius:22px;
            max-width:600px;
            margin:auto;
            text-align:center;
            box-shadow:0 8px 20px rgba(0,0,0,.08);
            transition:all .35s ease;
        }

.card:hover{
            transform:translateY(-8px);
            box-shadow:0 18px 40px rgba(0,0,0,.18);
        }

.btn{
            display:inline-block;
            background:#06285f;
            color:white;
            padding:12px 20px;
            border-radius:999px;
            text-decoration:none;
            font-weight:bold;
            transition:all .3s ease;
        }

.btn:hover{
            background:#ff7a1a;
            transform:scale(1.08);
        }

.circle{
            width:90px;
            height:90px;
            border-radius:50%;
            background:linear-gradient(135deg,#0d6efd,#00a7b5);
            margin:25px auto;
            animation:pulse 1.7s ease-in-out infinite;
        }

@keyframes pulse{
            0%{
                transform:scale(1);
                opacity:1;
            }
            50%{
                transform:scale(1.18);
                opacity:.75;
            }
            100%{
                transform:scale(1);
                opacity:1;
            }
        }
    </style>
</head>
<body>

<div class="card">
        <div class="circle"></div>
        <h1>CSS Motion Effects</h1>
        <p>Hover this card and button to see transitions.</p>
        <a href="#" class="btn">Start Learning</a>
    </div>

</body>
</html>

Output Preview Browser result

Practice Task: Change pulse duration to 3s, button scale to 1.15 and card hover movement to -14px.

Common Mistakes

Mistakes Students Should Avoid

Animations should make the user experience better, not confusing or heavy.

Wrong Habits

Adding too many animations on one page
Using very fast or distracting movement
Animating layout-heavy properties unnecessarily
Forgetting transition duration
Using hover-only effects for important information

Correct Habits

Use subtle motion for premium feel
Prefer transform and opacity for smooth effects
Keep duration comfortable
Use animations to guide attention
Keep website speed and accessibility in mind

Remember: The best animation is smooth, purposeful and not distracting.

Quick Revision

Remember These Points

Revise these before moving to Chapter 23.

Transition

Smoothly changes CSS values between two states.

Hover Effect

Applies style when user points over an element.

Transform

Moves, scales, rotates or skews elements.

Keyframes

Defines animation steps from start to end.

Animation

Runs motion effects using keyframes.

Best Practice

Use subtle motion and avoid distracting animations.

Protected Learning Content

CSS Transitions & Animations

transition

transform

@keyframes

animation

After This Chapter, You Will Understand

Transitions

Transform

Keyframes

Animation

Why Use Transitions and Animations?

1 Simple Meaning

2 Common Uses

transition Property

3 Basic Syntax

Hover the Button

Move, Scale and Rotate Elements

translate()

scale()

rotate()

@keyframes Rule

4 Keyframes Syntax

Floating Animation

Animation Properties

Float

Pulse

Slide

Practice Transitions and Animations

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. Which property creates smooth change between styles?

2. Which property can scale, rotate or move an element?

3. Which rule defines animation steps?

4. Which animation value makes animation repeat forever?

5. Which properties are usually smoother to animate?

Remember These Points

Transition

Hover Effect

Transform

Keyframes

Animation

Best Practice