DEV Community

Tamilselvan K
Tamilselvan K

Posted on

Day-13 🎥 Deep Dive Into CSS Animations and Keyframes

#webdev #programming #html #css

Today I went beyond the basics and explored how CSS animations and keyframes can turn static websites into dynamic, engaging experiences. If you're learning front-end development, this is an exciting area that adds personality and flow to your design—no JavaScript needed!

🎯 What Are CSS Animations?

CSS animations let you smoothly transition from one style to another using only CSS. Unlike transitions (which need a trigger like :hover), animations can run automatically when the page loads or when an element is added to the DOM.

🔄 Key Concept: @keyframes

@keyframes is used to define the intermediate steps in a CSS animation sequence. You define what styles an element should have at various stages of the animation (from 0% to 100%).

📦 Example: 

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}
Enter fullscreen mode Exit fullscreen mode

This animation makes the element jump up and come back down—like a bounce.

🛠️ How to Apply Animations

To make animations work, you combine @keyframes with the animation properties:

.box {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
Enter fullscreen mode Exit fullscreen mode

Or, shorthand:

.box {
  animation: bounce 1s ease-in-out 0s infinite alternate;
}
Enter fullscreen mode Exit fullscreen mode

🎛️ Animation Properties Explained

Property Purpose
animation-name Name of the @keyframes
animation-duration How long it lasts
animation-timing-function Speed curve (ease, linear, ease-in, etc.)
animation-delay Wait time before starting
animation-iteration-count How many times it runs (1, 2, infinite)
animation-direction Direction of play (normal, reverse, alternate, alternate-reverse)
animation-fill-mode Defines styles before/after animation (none, forwards, backwards, both)
animation-play-state Pauses/resumes the animation (running, paused)

🌈 Real-World Example 

<div class="loader"></div>
Enter fullscreen mode Exit fullscreen mode 
.loader {
  width: 50px;
  height: 50px;
  background: royalblue;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}
Enter fullscreen mode Exit fullscreen mode

This creates a pulsing circle, great for loading indicators.

⏱️ Pausing and Resuming Animations

You can control an animation with JavaScript or user interaction. For example:

.box:hover {
  animation-play-state: paused;
}
Enter fullscreen mode Exit fullscreen mode

This pauses the animation when the user hovers over the element.

🧠 Tips and Best Practices

  • Don’t overuse animations – subtlety is key.
  • Use will-change property for performance if you're animating transform or opacity.
  • Stick to GPU-accelerated properties (transform, opacity) for smoother performance.
  • Combine with media queries for accessibility (e.g., reduce motion): 
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

🧩 Summary

CSS animations are a powerful feature that can:

  • Draw attention to elements
  • Enhance UX (loaders, notifications, transitions)
  • Replace JavaScript for simple motion

With just a few lines of CSS, you can create fluid, interactive experiences.

💬 What I’m working on next: Combining animations with scroll events and building reusable animation utility classes!

Top comments (0)