CSSINTERMEDIATE

CSS Animations

CSS animations cheat sheet covering keyframes, transitions, transforms, timing functions, and performance tips with code examples.

5 min read

cssanimationstransitionstransformskeyframes

Other CSS Sheets

CSSBEGINNER CSS FlexboxINTERMEDIATE CSS GridINTERMEDIATE Screen Sizes & Responsive BreakpointsINTERMEDIATE

CSS Transitions

Smooth property changes over time for interactive effects

Transition Properties

Control how CSS properties animate from one value to another

css

transition: all 0.3s ease;
transition: property duration timing-function delay;
transition-property: transform, opacity;
transition-duration: 0.3s, 0.5s;

💡 Use transition for simple property changes

⚡ Transition multiple properties with comma separation

📌 transition-property: all can impact performance

✅ Combine with hover/focus for interactive effects

Timing Functions

Control the speed curve and acceleration of transitions

css

/* Predefined timing functions */
transition-timing-function: ease;       /* slow-fast-slow */
transition-timing-function: linear;     /* constant speed */
transition-timing-function: ease-in;    /* slow start */
transition-timing-function: ease-out;   /* slow end */
transition-timing-function: ease-in-out;/* slow start and end */

/* Custom cubic bezier */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

💡 ease is the default timing function

⚡ Use cubic-bezier() for custom easing curves

📌 steps() creates frame-by-frame animations

🎯 linear works best for continuous rotations

Hover Transitions

Create smooth hover effects with CSS transitions

css

.button {
  background: #4CAF50;
  transition: all 0.3s ease;
}

.button:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

💡 Define transition on base state, not hover state

⚡ Different transitions for hover on/off effects

📌 Combine transforms for complex hover effects

✅ Add will-change for better performance

Keyframe Animations

Create complex multi-step animations with @keyframes

Define Keyframes

Create named animation sequences with multiple steps

css

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

💡 Use percentages or from/to for keyframe stops

⚡ Keyframes can animate any CSS property

📌 Define multiple keyframes for complex animations

✅ Reuse keyframes across multiple elements

Animation Properties

Control keyframe animations with timing, duration, and iteration

css

animation: name duration timing-function delay iteration-count direction;
animation: slide 2s ease-in-out infinite;
animation: bounce 1s ease infinite alternate;
animation-play-state: paused | running;

💡 animation shorthand combines all properties

⚡ animation-fill-mode controls start/end states

📌 Use animation-play-state to pause animations

🎯 infinite iteration for continuous animations

Common Animations

Ready-to-use animation patterns for frequent use cases

css

/* Spin */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }

/* Pulse */
@keyframes pulse {
  50% { transform: scale(1.1); }
}
.pulse { animation: pulse 2s ease infinite; }

/* Shake */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

💡 Pulse effects draw attention to CTAs

⚡ Slide animations for smooth entrances

📌 Bounce effects add playfulness

✅ Fade animations for subtle transitions

CSS Transform

2D and 3D transformations for rotating, scaling, and moving elements

Transform Functions

Move, rotate, scale, and skew elements in 2D space

css

transform: translateX(50px);
transform: translateY(-20px);
transform: translate(50px, 100px);
transform: scale(1.5);
transform: rotate(45deg);
transform: skew(10deg, 20deg);

/* Multiple transforms */
transform: rotate(45deg) scale(1.5) translateX(50px);

💡 Combine multiple transforms in order

⚡ transform-origin changes the anchor point

📌 Use scale() for zoom effects

✅ translate() is better than position for animations

3D Transforms

Create depth and perspective with 3D transformations

css

/* Enable 3D */
transform-style: preserve-3d;
perspective: 1000px;

/* 3D Transforms */
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: translateZ(50px);
transform: rotate3d(1, 1, 0, 45deg);

💡 Set perspective on parent container

⚡ preserve-3d maintains 3D space for children

📌 backface-visibility for card flip effects

⚠️ 3D transforms can be GPU-intensive

Advanced Animations

Performance optimization and advanced animation techniques

Performance Optimization

Optimize animations for smooth 60fps performance

css

/* Optimize with transform and opacity */
.element {
  transform: translateX(100px); /* GPU accelerated */
  opacity: 0.5;                 /* GPU accelerated */
}

/* Use will-change */
.element {
  will-change: transform, opacity;
}

/* Force hardware acceleration */
.element {
  transform: translateZ(0); /* or translate3d(0,0,0) */
}

💡 Animate transform and opacity for best performance

⚡ Use will-change sparingly for GPU acceleration

📌 Avoid animating layout properties (width, height)

⚠️ Too many animations can cause jank

CSS Variables in Animations

Use custom properties for dynamic and reusable animations

css

:root {
  --rotation: 0deg;
  --scale: 1;
}

.element {
  transform: rotate(var(--rotation)) scale(var(--scale));
  transition: transform 0.3s;
}

.element:hover {
  --rotation: 360deg;
  --scale: 1.2;
}

💡 Update variables with JavaScript for dynamic animations

⚡ Variables make animations more maintainable

📌 Fallback values ensure compatibility

✅ Scope variables for component isolation

Scroll-Triggered Animations

Trigger animations based on scroll position using modern CSS

css

/* Intersection Observer API (JavaScript) */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* CSS Scroll Snap */
.container {
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: start;
}

💡 animation-timeline for scroll-driven animations

⚡ @scroll-timeline defines custom scroll triggers

📌 Intersection Observer API for broader support

⚠️ Check browser support for scroll animations

Practical Examples

Real-world animation patterns for common UI components

Loading Animations

Create engaging loading indicators and spinners

css

/* Dots Loading */
@keyframes dot-pulse {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

.dot { animation: dot-pulse 1.4s infinite; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

/* Progress Bar */
.progress-bar {
  animation: fill 2s ease forwards;
}

@keyframes fill {
  to { width: 100%; }
}

💡 Keep loading animations simple and smooth

⚡ Use CSS-only solutions when possible

📌 Skeleton screens improve perceived performance

✅ Match animation to brand personality

Button Animations

Interactive button effects for better user feedback

css

/* Ripple Effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: translate(-50%, -50%);
}

.ripple:active::before {
  animation: ripple 0.6s;
}

@keyframes ripple {
  to {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

💡 Subtle animations improve UX

⚡ Transform scale for press effects

📌 Ripple effects for material design

✅ Disable animations for reduced motion preference

Text Animations

Animate text for emphasis and visual interest

css

/* Typewriter Effect */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(30), blink 0.5s step-end infinite alternate;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* Gradient Animation */
.gradient-text {
  background: linear-gradient(45deg, #4CAF50, #2196F3, #9C27B0);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

💡 Animate individual letters for typewriter effects

⚡ Use clip-path for reveal animations

📌 Text shadows for glowing effects

⚠️ Ensure text remains readable during animation

More CSS Cheat Sheets