CSS Animations Only – No JavaScript, No Extra Libraries

Why Go CSS‑Only?

Animations can be fast, smooth, and lightweight when they run entirely on the GPU. By using only CSS you avoid a JS runtime, reduce bundle size, and keep your page accessible to users with scripts disabled.

All modern browsers support the @keyframes rule and the animation family of properties, making it trivial to create anything from a subtle hover effect to a full‑page loading sequence.

Key Concepts

animation-name points to a @keyframes rule, animation-duration sets how long it runs, animation-timing-function controls easing, and animation-iteration-count (default 1) determines how many times it repeats.

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.element {
  animation: fadeIn 1.5s ease-out forwards;
}

Practical Examples

1. Loader Spinner

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #ccc;
  border-top: 4px solid #0066cc;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

2. Slide‑in Card

.card {
  transform: translateX(-100%);
  animation: slideIn 0.5s forwards ease-out;
}
@keyframes slideIn {
  to { transform: translateX(0); }
}

3. Hover Scale Effect

.card:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

4. Text Fade‑Up on Scroll

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.section-title {
  opacity: 0;
  animation: fadeUp 0.8s forwards;
  animation-delay: 0.2s;
}

Performance Tips

Use transforms over top/left – they’re GPU‑accelerated.
Keep animation durations short (≤ 1s) to avoid user distraction.
Use animation-fill-mode: forwards to preserve the final state.
Throttle animations when prefers-reduced-motion is set.
Limit simultaneous animations; too many can cause frame drops.

Browser Support Snapshot

Feature	Chrome	Edge	Firefox	Safari
@keyframes	✔️	✔️	✔️	✔️
animation-delay	✔️	✔️	✔️	✔️
prefers-reduced-motion media query	✔️	✔️	✔️	✔️

For the most up‑to‑date table, check Can I Use.