CSS Animations

June 18, 2025

CSS animations allow you to animate the transitions of various properties, like colors, sizes, positions, or even more complex transformations. They can be keyframed or use simple transitions to provide visual feedback and enhance user experience. Here’s a breakdown of how CSS animations work, how to implement them, and some examples.

1. Basic Structure of CSS Animation

At the core, a CSS animation consists of:

Keyframes: These define the states of the animation over time.
Animation Property: This is used to control the animation’s behavior, including its duration, timing, and iteration count.

Example:

css

@keyframes example {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: blue;
  }
}

.element {
  width: 100px;
  height: 100px;
  animation: example 3s infinite;
}

In this example, an element will cycle through three colors (red, yellow, and blue) over 3 seconds, continuously.

2. Key Properties for Animations

animation-name: Specifies the name of the animation (usually tied to a @keyframes rule).
animation-duration: Defines how long the animation lasts.
animation-timing-function: Specifies how the intermediate keyframes are distributed over time (e.g., ease, linear, ease-in, ease-out, cubic-bezier()).
animation-delay: Sets a delay before the animation starts.
animation-iteration-count: Specifies how many times the animation should run (infinite for endless loop).
animation-direction: Controls the direction of the animation (e.g., normal, reverse, alternate).

Full Example:

css

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.element {
  width: 100px;
  height: 100px;
  background-color: green;
  animation: slide 2s ease-in-out 1s infinite;
}

Here, the element will move 100px to the right and back to its original position in 2 seconds, with a delay of 1 second before starting.

3. Common Animation Timing Functions

ease: Starts slow, becomes faster, and then slows down again.
linear: Maintains a constant speed.
ease-in: Starts slow and accelerates.
ease-out: Starts fast and decelerates.
ease-in-out: Starts slow, accelerates, then decelerates.
cubic-bezier(): Allows you to create custom timing functions with 4 control points.

4. Animation Shorthand Syntax

Instead of writing all the animation properties one by one, you can combine them in shorthand like this:

css

.element {
  animation: slide 2s ease-in-out 1s infinite alternate;
}

This is shorthand for:

animation-name: slide
animation-duration: 2s
animation-timing-function: ease-in-out
animation-delay: 1s
animation-iteration-count: infinite
animation-direction: alternate

5. Using Transitions (For Simple Animations)

CSS transitions allow you to animate a change in CSS properties when a state change occurs, like a hover event.

css

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.element:hover {
  transform: scale(1.5);
  background-color: blue;
}

In this example, when the user hovers over the element, it will grow in size and change color over a period of 0.3 seconds.

6. Advanced CSS Animation Techniques

CSS Animation with SVG: You can animate parts of SVG images, such as path shapes, fills, strokes, and transforms.
Animating Multiple Properties: You can animate multiple properties at once (e.g., color, scale, opacity, etc.).
Chaining Animations: You can apply multiple animations on a single element with a delay or sequence.
3D Transforms: CSS allows you to create 3D animations by using perspective, rotateX(), rotateY(), rotateZ(), etc.

Example: Animation with Multiple Properties

css

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(1.5);
    opacity: 0.5;
  }
}

.element {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation: spin 4s infinite linear;
}

7. JavaScript & CSS Animations

You can also trigger CSS animations via JavaScript by manipulating the classes or directly setting the styles.

const element = document.querySelector('.element');
element.addEventListener('click', () => {
  element.classList.add('animate');
});

css

.element.animate {
  animation: spin 2s ease-in-out;
}

Summary

CSS animations allow you to create smooth, interactive transitions without needing JavaScript. You can animate properties using @keyframes and control the timing and behavior with the animation shorthand properties. Combine them with interactive events (like hover or click) to create dynamic, engaging websites.

Let me know if you want more examples or explanations on specific animation effects!