CSS Animations

Bring your website to life. Learn transitions, keyframes and animations with pure CSS — no JavaScript needed.

The first time I added a smooth hover animation to a button — I felt like a magician. The user clicked and the button glowed. It felt alive. CSS Animations are what separate a boring static website from a professional interactive experience. And they are much easier than you think.

Transition vs Animation — What is the Difference?

Feature	Transition	Animation
Trigger	Needs user action (hover, click)	Runs automatically
Steps	Start → End only	Multiple steps with keyframes
Repeat	Does not repeat	Can repeat infinitely
Best for	Hover effects, button states	Loaders, pulse effects, entrances

1. CSS Transitions — Smooth Hover Effects

Transitions make property changes smooth instead of instant. Add transition to an element and any change will animate smoothly.

CSS

/* Smooth button hover */
.button {
  background: #4f6ef7;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease; /* magic line */
}

.button:hover {
  background: #3d5ce0;
  transform: translateY(-2px); /* lift up */
  box-shadow: 0 8px 20px rgba(79,110,247,.4);
}

2. CSS Keyframes — Multi-Step Animations

Keyframes let you define multiple steps in an animation. Think of it like a timeline — at 0% do this, at 50% do that, at 100% finish here.

CSS

/* Define the animation */
@keyframes fadeIn {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Apply the animation */
.card {
  animation: fadeIn 0.5s ease forwards;
}

/* Pulse animation — infinite loop */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.badge {
  animation: pulse 2s ease infinite;
}

Animation Properties

Property	What It Does	Example
animation-name	Which keyframe to use	fadeIn
animation-duration	How long it takes	0.5s
animation-timing-function	Speed curve	ease \| linear
animation-delay	Wait before starting	0.2s
animation-iteration-count	How many times	1 \| infinite
animation-fill-mode	Keep final state	forwards

Pro Tips

Pro Tip #1 — Use transform not position

Always animate transform and opacity — never top, left, width or height. Transform uses the GPU and gives you silky smooth 60fps animations. Position-based animations cause layout reflow and look choppy.

Pro Tip #2 — forwards saves your final state

Add animation-fill-mode: forwards to keep the element in its final animated state. Without it, the element snaps back to its original position when the animation ends.

Pro Tip #3 — ease looks most natural

For most animations use ease — it starts fast and slows down at the end, which matches how real objects move in the physical world. linear looks robotic. ease-in-out is great for entrances and exits.

Quick Reference Cheatsheet

CSS CHEATSHEET

/* Transition shorthand */
transition: all 0.3s ease;
transition: background 0.2s ease, transform 0.3s ease;

/* Animation shorthand */
animation: fadeIn 0.5s ease forwards;
animation: pulse 2s ease infinite;

/* Common transforms */
transform: translateY(-4px);   /* move up */
transform: scale(1.05);       /* grow */
transform: rotate(360deg);   /* spin */

/* Fade in keyframe */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

Next Lesson

JavaScript Array Methods — map, filter, reduce

Search This Blog

WaheedBlog | Free Web Development Tutorials for Beginners

CSS Animations & Keyframes — Complete Guide for Beginners