CSS Animations & Transitions Cheat Sheet: Keyframes, Easing & Performance

CSS transitions interpolate properties when a state changes (hover, class toggle). CSS animations run @keyframes over time and can loop. Animate transform and opacity for smoother results; animating width, top, or box-shadow often causes layout or expensive paints.

This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Transition: transition: transform 200ms ease, opacity 200ms ease on the resting state, not only :hover.
• Properties: List what you interpolate. transition: all is easy to over-animate and hard to debug.
• Easing: ease-out for entering, ease-in for leaving. cubic-bezier for custom motion.
• Keyframes: @keyframes name { from {} to {} } or percentage steps.
• Animation: animation: name duration easing delay iteration direction fill.
• Fill: animation-fill-mode: forwards keeps the last keyframe. Default snaps back.
• Pause: animation-play-state: paused or toggle a class. Respect reduced motion.
• GPU: transform and opacity composite well. left/height trigger layout.

Copy-paste examples

Hover transition and a one-shot keyframe

Declare transition on the element, not only on hover, so the reverse animation also eases.

.btn {
  transform: translateY(0);
  transition: transform 180ms ease, background-color 180ms ease;
}
.btn:hover {
  transform: translateY(-2px);
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.alert {
  animation: fade-in 240ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .btn, .alert { animation: none; transition: none; }
}

Common mistakes

• Animating height: auto (it will not interpolate). Use grid 0fr/1fr or max-height with care.
• transition: all 0.5s on large trees — surprise motion on color, border, and layout.
• Infinite decorative loops with no reduced-motion alternative.
• Using CSS animation for a progress bar that should reflect real data — that is JS state.

FAQ

1. Transition or animation? Transition when A → B on a state change. Animation when you need loops, delays, or multi-step sequences.

1. Why is my transition instant? You added transition only on :hover, or you changed a property that cannot interpolate (display).

1. Will CSS animation beat JavaScript? For UI flourishes, yes — the browser can optimize it. For physics, drag, or scroll-linked motion, use JS or WAAPI.

Related CSS cheat sheets

• Css Cheat Sheet 2026
• Css Flexbox Cheat Sheet
• Css Grid Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.