What are the transitions in CSS Animation?

transition: all 0.3s ease; — Shorthand (property duration timing); transition-property: opacity, transform; — Which properties to animate; transition-duration: 0.3s; — How long the transition takes; transition-timing-function: ease; — Speed curve of transition; transition-delay: 0.1s; — Wait before transition starts; transition: opacity 0.3s ease, transform 0.5s ease-out; — Multiple transitions

What are the timing functions in CSS Animation?

ease — Slow start, fast middle, slow end (default); linear — Constant speed throughout; ease-in — Slow start, fast end; ease-out — Fast start, slow end; ease-in-out — Slow start and end; cubic-bezier(0.68, -0.55, 0.265, 1.55) — Custom curve (this one bounces); steps(4, end) — Stepped animation (4 discrete steps)

What are the @keyframes in CSS Animation?

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } — Simple from/to keyframes; @keyframes slide { 0% { left: 0; } 50% { left: 50%; } 100% { left: 100%; } } — Percentage keyframes; @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } — Looping keyframes; @keyframes multi { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } — Multiple properties

CSS Animation Cheat Sheet

CSS animations and transitions quick reference. @keyframes, animation properties, transition timing, transforms, and common animation patterns.

Transitions Timing Functions @keyframes Animation Properties Animation Shorthand Transforms Common Patterns Performance Tips

Transitions

transition: all 0.3s ease;	Shorthand (property duration timing)
transition-property: opacity, transform;	Which properties to animate
transition-duration: 0.3s;	How long the transition takes
transition-timing-function: ease;	Speed curve of transition
transition-delay: 0.1s;	Wait before transition starts
transition: opacity 0.3s ease, transform 0.5s ease-out;	Multiple transitions

Timing Functions

ease	Slow start, fast middle, slow end (default)
linear	Constant speed throughout
ease-in	Slow start, fast end
ease-out	Fast start, slow end
ease-in-out	Slow start and end
cubic-bezier(0.68, -0.55, 0.265, 1.55)	Custom curve (this one bounces)
steps(4, end)	Stepped animation (4 discrete steps)

@keyframes

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }	Simple from/to keyframes
@keyframes slide { 0% { left: 0; } 50% { left: 50%; } 100% { left: 100%; } }	Percentage keyframes
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }	Looping keyframes
@keyframes multi { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }	Multiple properties

Animation Properties

animation-name: fadeIn;	Name of @keyframes to use
animation-duration: 1s;	How long one cycle takes
animation-delay: 0.5s;	Wait before animation starts
animation-iteration-count: infinite;	Number of cycles (or infinite)
animation-direction: alternate;	normal \| reverse \| alternate \| alternate-reverse
animation-fill-mode: forwards;	none \| forwards \| backwards \| both
animation-play-state: paused;	running \| paused
animation-timing-function: ease-in-out;	Speed curve per cycle

Animation Shorthand

animation: fadeIn 1s ease-in-out;	name duration timing
animation: fadeIn 1s ease-in-out 0.5s;	name duration timing delay
animation: fadeIn 1s ease-in-out 0.5s infinite;	... with infinite loop
animation: fadeIn 1s ease-in-out 0.5s infinite alternate;	... with alternate direction
animation: fadeIn 1s ease-in-out 0.5s infinite alternate forwards;	... with fill-mode
animation: fadeIn 1s, slideIn 0.5s 0.3s;	Multiple animations

Transforms

transform: translateX(20px);	Move horizontally
transform: translateY(-10px);	Move vertically
transform: translate(20px, -10px);	Move both axes
transform: rotate(45deg);	Rotate clockwise
transform: scale(1.5);	Scale uniformly
transform: scale(1.5, 0.8);	Scale X and Y separately
transform: skewX(10deg);	Skew horizontally
transform-origin: center center;	Set rotation/scale pivot point
transform: perspective(500px) rotateY(30deg);	3D perspective transform

Common Patterns

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }	Fade in
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }	Slide up + fade
@keyframes bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }	Bounce
@keyframes spin { to { transform: rotate(360deg) } }	Continuous spin
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }	Shake / wiggle
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }	Pulse / breathe

Performance Tips

will-change: transform, opacity;	Hint browser to optimize (use sparingly)
transform: translateZ(0);	Force GPU layer (hack, prefer will-change)
Use transform + opacity only	These skip layout & paint (fastest)
Avoid animating width, height, top, left	These trigger layout recalculation
contain: layout;	Isolate element from rest of layout
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }	Respect user motion preferences

Step-by-Step Guide

How to Generate CSS Gradients

Read Guide →

More Cheat Sheets

Regex Cheat Sheet Git Cheat Sheet Markdown Cheat Sheet HTTP Status Codes Cheat Sheet