CSS Animations

Learn how to create dynamic and engaging animations using CSS Keyframes and Animation Properties.

CSS Animations allow you to create smooth, complex animations directly in your stylesheets using @keyframes and animation properties.

🎬 What are CSS Animations?

CSS Animations make it possible to animate transitions between different states of an element without using JavaScript. They are controlled using the @keyframes rule and a set of animation properties.

🎥 Keyframes (`@keyframes`)

The @keyframes rule defines the steps of an animation, specifying what styles the element should have at certain points during the animation sequence.

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

This example creates a fade-in effect from invisible (opacity: 0) to fully visible (opacity: 1).

🎛️ Animation Properties

Property	Description
`animation-name`	Name of the `@keyframes` animation
`animation-duration`	How long the animation takes (e.g., `2s`)
`animation-timing-function`	Speed curve (ease, linear, ease-in-out)
`animation-delay`	Time before animation starts (e.g., `1s`)
`animation-iteration-count`	Number of times to run the animation (e.g., `infinite`)

Example:

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

🏀 Creating Complex Animations

You can chain multiple steps inside @keyframes and make animations loop, bounce, or repeat infinitely.

Example: Bouncing Box

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
}
 
.bouncing-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: bounce 1s infinite ease-in-out;
}

🧪 Try Yourself

// This JS file can be used for additional functionality if needed.
console.log('CSS Animations Example Loaded');

Open Sandbox

🛠️ Animation Shorthand

Instead of writing each property individually, you can use shorthand:

animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];

Example:

.box {
  animation: fadeIn 2s ease-in 0s 1 normal forwards;
}

📝 Key Takeaways

Define animations once and apply them to multiple elements.

CSS Animations

On this page