CSS Animations: Breathing Life into Pixels
Static websites are a thing of the past. By mastering CSS Transitions and Animations, you can guide users' attention, provide meaningful feedback, and create delightful experiences—all without writing a single line of JavaScript.
The Gateway: CSS Transitions
Transitions are the simplest way to animate an element. They occur when a property's value changes, typically triggered by pseudo-classes like :hover or :focus. You only need to declare the property you want to animate and the duration.
The shorthand property transition: background-color 0.3s ease-in-out; takes care of the property, duration, and timing function (how the speed changes over the animation's course).
Hardware Acceleration: Transform
When animating properties like width, height, or margin, the browser has to recalculate the entire page layout. This is expensive and causes "jank" (stuttering).
Instead, use transform. Properties like translate(), scale(), and rotate() are processed by the GPU, ensuring silky-smooth 60fps animations.
Full Control: @keyframes
While transitions need a trigger, animations can play automatically, loop, and have complex intermediate steps. You define these steps using the @keyframes rule.
- Steps: You can use
fromandto, or percentages (0%,50%,100%) for extreme precision. - Properties: The
animationshorthand allows you to set the name, duration, timing-function, delay, iteration-count, and direction in one line.
View Performance Tips+
Always animate Transform and Opacity. Changing these properties does not trigger layout recalculations or repaints. If you need to move a box, use transform: translateX(50px) instead of left: 50px. This is the golden rule of CSS animation performance.
❓ Frequently Asked Questions
What is the difference between CSS transitions and animations?
Transitions: They are automatic when a property changes (usually via hover or focus). They are simple and perfect for state changes. e.g.: `transition: background-color 0.3s ease;`
Animations: They use `@keyframes` to control multiple steps without needing a triggering property change. They are more complex but more powerful. You can set them to run automatically, repeat, and have full control.
/* Transition - reacts to events */ transition: all 0.3s; /* Animation - runs automatically */ animation: pulse 2s infinite;Why should I use transform instead of width, height, or left?
Properties like width, height, left, margin: They require the browser to recalculate the entire page layout (reflow), which causes "jank" (stuttering) and eats CPU.
Transform, opacity: They are processed directly by the GPU without affecting layout. The browser can handle them at 60fps smoothly.
/* ❌ BAD - causes reflow */ left: 50px; /* ✅ GOOD - uses GPU */ transform: translateX(50px);How do I write @keyframes correctly?
Define the steps of your animation using percentages (0%, 50%, 100%) or the keywords `from` (0%) and `to` (100%):
@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); background: #FF0099; }}.element {animation: bounce 1s ease-in-out infinite;}