Ananta Code Academy
ananta::html-css
MODULE 04 · LAYOUT & RESPONSIVENESS

Transitions & Animations

Layout tells the browser where things go. Transitions and animations tell it how things change — the smooth hover states, loading spinners, and subtle motion that make an interface feel alive instead of static.

Day 27 of 30 Intermediate ~21 min
01 · OVERVIEW

Two Tools for Two Different Jobs

CSS has two separate systems for motion. Transitions smoothly animate a property between two states — usually triggered by :hover, :focus, or a class change. Animations use @keyframes to define a full motion sequence that can run automatically, repeat, and pass through several steps.

02 · THE transition PROPERTY

Smoothing a Change Between States

transition tells the browser to animate a property change instead of jumping instantly. It needs a property, a duration, and usually a timing function.

style.css 
.btn {
  background: #ffffff;
  transform: translateY(0);
  transition: background .2s ease, transform .2s ease;
}

.btn:hover {
  background: #e8590c;
  transform: translateY(-4px);
}
SAME TRANSITION, DIFFERENT TIMING — HOVER EACH ONE
transition: .1s linear
transition: .6s ease-in-out
cubic-bezier(.34,1.56,.64,1)
03 · TIMING FUNCTIONS

Controlling the Pace of Change

The timing function shapes how a transition accelerates and decelerates — not just how long it takes.

VALUE FEEL
linear

Constant speed throughout — often feels mechanical.

ease

Starts fast, slows toward the end — the default, and usually the safest choice.

ease-in-out

Slow start and slow end, faster in the middle — feels smooth and deliberate.

cubic-bezier()

A fully custom curve — used for effects like overshoot or bounce.

04 · A REAL-WORLD HOVER EFFECT

Lifting a Card on Hover

One of the most common uses of transition: a card that lifts and gains a soft shadow on hover, using transform and box-shadow together.

style.css 
.card {
  box-shadow: 0 4px 10px -6px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 26px -14px rgba(232,89,12,0.35);
}
HOVER THE CARD
Course Card

Hover to lift.

05 · @keyframes ANIMATIONS

Defining a Motion Sequence

@keyframes names a sequence of steps from 0% to 100% (or from/to). The animation property then applies that sequence to an element with a duration, timing function, and repeat behavior.

style.css 
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.dot {
  animation: pulse 1.4s ease-in-out infinite;
}
THREE COMMON ANIMATIONS, RUNNING LIVE
pulse — infinite
spin — infinite
Fade in
fade + slide — once
06 · ANIMATION SHORTHAND

The Pieces Behind animation

PART CONTROLS
duration

How long one cycle of the animation takes.

timing-function

The easing curve — same values as transition.

iteration-count

How many times it repeats — a number, or infinite.

fill-mode

Whether the element keeps the last keyframe's styles after finishing (both/forwards).

07 · USE MOTION SPARINGLY

More Isn't Better

RIGHT VS WRONG USE OF MOTION
AVOID Animating everything on the page at once, or using infinite animations on large blocks of text — it's distracting and can trigger discomfort for some users.
BETTER Reserve motion for feedback (hover, loading) and small, purposeful accents — and keep durations short, usually under half a second.
08 · BREAKDOWN

Breaking Down What You Just Learned

1

Transitions vs animationsTransitions animate a state change; animations run self-contained sequences via @keyframes.

2

transition propertyNeeds a property, duration, and timing function to animate a change smoothly.

3

Timing functionslinear, ease, ease-in-out, and cubic-bezier() all shape the pace of motion differently.

4

@keyframesDefines named steps from 0% to 100%; animation applies them with duration and repeat behavior.

5

Use sparinglyMotion should support feedback and small accents, not run on everything at once.

09 · PRACTICE

Try It Yourself

EXERCISE

Add a transition to every button and card on your Day 15 project — background and transform on hover — then build one @keyframes loading spinner and drop it into a "loading" section.

10 · TODAY'S PRACTICE

Add Motion to a Small Interface

HANDS-ON EXERCISE

Practicing transitions and keyframe animations together

Create day27.html linked to a stylesheet and build the following on the page.

  1. Build a button with a transition on background and transform, triggered by :hover.
  2. Build a card that lifts with translateY and gains a stronger box-shadow on hover.
  3. Write an @keyframes pulse animation and apply it to a small badge or dot, set to infinite.
  4. Write an @keyframes spin animation and build a loading spinner from a bordered circle.
  5. Build a fade-in @keyframes animation that runs once on page load for a heading or card.
11 · RECAP

Recap

TRANSITIONS

Animate a property change between two states, usually triggered by interaction.

TIMING FUNCTIONS

linear, ease, ease-in-out, and cubic-bezier() shape the pace of motion.

@keyframes

Defines a named sequence of steps that animation then applies to an element.

USE SPARINGLY

Motion should support feedback and small accents, not run everywhere at once.

12 · SUMMARY

Key Takeaways

  • transition smoothly animates a property change, typically triggered by :hover, :focus, or a class toggle.
  • Timing functions like ease and ease-in-out shape how a transition accelerates and decelerates.
  • @keyframes defines named steps from 0% to 100%, which the animation property then plays on an element.
  • animation-iteration-count: infinite repeats an animation forever — useful for spinners and pulsing indicators.
  • Motion works best in moderation — reserved for feedback and small purposeful accents, not applied everywhere.
Course Overview