CSS Animations & Transitions Cheat Sheet

Covers CSS transitions, @keyframes animations, transform functions, and performance-conscious animation properties for smooth UI motion.

2 PagesIntermediateMar 18, 2026

CSS Transitions

Animating property changes between states.

css

.button {  background: #3498db;  transition: background-color 0.3s ease, transform 0.2s ease-out;}.button:hover {  background-color: #2980b9;  transform: translateY(-2px);}/* transition shorthand: property duration timing-function delay */.card {  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s;}

@keyframes Animations

Multi-step animations independent of state changes.

css

@keyframes fadeInUp {  from {    opacity: 0;    transform: translateY(20px);  }  to {    opacity: 1;    transform: translateY(0);  }}.toast {  animation: fadeInUp 0.4s ease-out forwards;}@keyframes spin {  0%   { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}.spinner {  animation: spin 1s linear infinite;}

Transform Functions

Moving, scaling, and rotating elements.

css

.el {  transform: translate(10px, 20px);   /* move on x/y */  transform: scale(1.2);               /* uniform scale */  transform: rotate(45deg);  transform: skew(10deg, 0deg);  transform: translate3d(0, 0, 0);     /* promote to its own GPU layer */  /* combine multiple functions, applied left to right */  transform: translateX(10px) rotate(5deg) scale(1.1);  transform-origin: center center;     /* pivot point for scale/rotate */}

Animation Properties

Fine-tuning timing and behavior.

animation-duration- how long one cycle of the animation takes
animation-timing-function- the easing curve, e.g. ease, linear, or cubic-bezier()
animation-iteration-count- number of repeats, or infinite
animation-fill-mode: forwards- retains the last keyframe's styles after the animation finishes
animation-play-state- pause/running control, toggleable from JavaScript
will-change: transform- hints to the browser to optimize ahead of an upcoming animation
prefers-reduced-motion- media query used to respect users who have disabled motion

Pro Tip

Animate only transform and opacity when possible: they can run on the browser's compositor thread without triggering layout or paint, which is the difference between a smooth 60fps animation and a janky one.

Was this cheat sheet helpful?

CSS Grid Deep Dive Cheat Sheet

Responsive Web Design Cheat Sheet

Explore Topics

#CSSAnimationsTransitions#CSSAnimationsTransitionsCheatSheet#WebDevelopment#Intermediate#CSSTransitions#KeyframesAnimations#TransformFunctions#AnimationProperties#Functions#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services