CSS Transitions and Animations

Analogy categoryAnalogies

Introduction

CSS transitions and animations let elements change appearance over time instead of jumping instantly between states. Transitions smoothly interpolate a property between two values, typically triggered by a state change like :hover or a class toggle. Animations use @keyframes to define multiple steps in a sequence, enabling more complex, repeating, or self-running motion without JavaScript.

🏏

Cricket analogy: A CSS transition is like a fielder smoothly jogging into a new position between overs, while a @keyframes animation is like a full pre-match warm-up routine with multiple choreographed drills repeating on their own.

Syntax

css

/* Transition */
.box {
  transition-property: background-color, transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  /* shorthand: transition: background-color 0.3s ease-in-out; */
}

/* Animation */
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.panel {
  animation-name: slide-in;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

Explanation

transition-property lists which CSS properties should animate when they change, transition-duration sets how long the change takes, and transition-timing-function controls the acceleration curve. Animations go further with @keyframes, where you define named percentage or from/to steps describing property values at points along the timeline. animation-iteration-count, animation-direction, and animation-fill-mode give fine control over looping, reversing, and what happens before and after the animation runs.

🏏

Cricket analogy: transition-property is like naming which stat to track (strike rate), transition-duration is the number of overs it changes over, and @keyframes is like a full innings plan with defined milestones at the 10th, 20th, and 40th over, with animation-iteration-count like a series repeating every match.

Example

css

.btn {
  background-color: #2563eb;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn:hover {
  background-color: #1d4ed8;
  transform: scale(1.05);
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.notification-dot {
  animation: pulse 2s infinite;
}

Output

Hovering over .btn smoothly darkens its background color and slightly enlarges it over a quarter second rather than changing instantly. The .notification-dot continuously emits an expanding, fading ring effect every two seconds because animation-iteration-count is set to infinite, creating a pulsing attention-grabbing indicator.

🏏

Cricket analogy: Hovering over .btn is like a fielder sharpening focus and stepping slightly forward the instant the bowler starts their run-up — a smooth quarter-second shift rather than a sudden jump — while .notification-dot pulsing forever is like a stadium siren repeating every boundary alert.

Key Takeaways

Transitions require a state change (like :hover, a class toggle, or JS) to trigger; they do not run automatically on page load.
Animations run independently using @keyframes and can loop, reverse, and start automatically.
animation-fill-mode: forwards keeps the final keyframe's styles applied after the animation ends.
Animating transform and opacity performs better than animating layout properties like width or top.

Practice what you learned

1. Which CSS at-rule is used to define the steps of an animation?

2. What triggers a CSS transition to occur?

3. Which property makes an animation repeat forever?

4. Why are transform and opacity preferred for smooth animations?

5. What does animation-fill-mode: forwards do?

Was this page helpful?

Backgrounds and Borders in CSS

CSS Custom Properties (Variables)

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#HTMLCSS#HTMLCSSStudyNotes#WebDevelopment#CSSTransitionsAndAnimations#CSS#Transitions#Animations#Syntax#StudyNotes#SkillVeris

Introduction

Syntax

Explanation

Example

Output

Key Takeaways

Practice what you learned

You May Also Like

Related Reading

Related Study Notes in Web Development

Topics covered