CSS Animations & Effects Guide

Transitions vs Animations

CSS transitions animate between two states (e.g., hover). CSS animations use @keyframes for multi-step sequences. Use transitions for simple interactions, animations for complex motion.

/* Transition, simple state change */
.button { transition: transform 0.2s ease; }
.button:hover { transform: scale(1.05); }

/* Animation, multi-step */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.loader { animation: pulse 2s infinite; }

CSS Transforms

Transforms let you move, rotate, scale, and skew elements without affecting layout flow. They're GPU-accelerated, making them ideal for smooth animations.

transform: translate(10px, 20px);  /* move */
transform: rotate(45deg);          /* rotate */
transform: scale(1.5);             /* resize */
transform: skew(10deg, 5deg);      /* distort */

/* Combine multiple transforms */
transform: translateY(-10px) rotate(5deg) scale(1.1);

Easing Functions

Easing controls the acceleration curve of an animation. The right easing makes motion feel natural.

• ease: default, starts fast then slows
• ease-in-out: smooth start and end, great for UI transitions
• cubic-bezier(): custom curves for precise control
• linear: constant speed, use for progress bars or looping animations

Border Radius Tricks

Beyond simple circles, border-radius can create organic blob shapes with 8-value syntax:

/* Circle */
border-radius: 50%;

/* Pill shape */
border-radius: 9999px;

/* Organic blob */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Responsive Sizing with clamp()

clamp(min, preferred, max) creates fluid, responsive values without media queries:

/* Fluid font size: 16px minimum, scales with viewport, 32px max */
font-size: clamp(1rem, 2vw + 0.5rem, 2rem);

/* Fluid spacing */
padding: clamp(1rem, 3vw, 3rem);

Performance Tips

• Only animate transform and opacity for 60fps, these skip layout and paint
• Use will-change: transform sparingly to hint GPU acceleration
• Prefer prefers-reduced-motion media query to respect user accessibility settings

Try our Animation Generator, Transform Generator, or Clamp Generator to build effects visually.