CSS Animations for Beginners — 20 Ready-to-Use Effects for Buttons, Cards & Loaders

CSS Transitions vs CSS Animations

There are two tools for CSS animation:

CSS Transitions — animate between two states on a trigger (hover, focus):

.btn { transition: transform 0.2s ease; }
.btn:hover { transform: translateY(-3px); }

CSS Animations (@keyframes) — play a sequence automatically:

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,134,11,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(184,134,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,134,11,0); }
}
.btn { animation: pulse 2s ease-out infinite; }

Button — Shine Sweep Effect

A light shine sweeps across the button on hover:

.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.4s ease;
}
.btn-shine:hover::after { left: 150%; }

Loading — Skeleton Shimmer

The gray placeholder that appears while content loads:

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

Card — 3D Flip

.card-flip-wrapper { perspective: 1000px; }
.card-flip {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.card-flip-wrapper:hover .card-flip { transform: rotateY(180deg); }
.card-front, .card-back { backface-visibility: hidden; }
.card-back { transform: rotateY(180deg); }

Trigger on Scroll with Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('anim-fade-in');
      observer.unobserve(entry.target);
    }
  });
});
document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el));

This is a preview. The full ebook includes all 20 animations with complete copy-paste CSS — button lift, press, pulse glow; card glow and tilt; bouncing dots loader; typewriter text; slide up; gradient color shift; and bounce-in entrance.