← Back to Chapters

CSS Animations

?️ CSS Animations

CSS Animations let you smoothly change element styles over time using keyframes. You can animate movement, color, size, opacity, and more — all without JavaScript.

⚡ Quick Overview

With CSS animations you define @keyframes (what changes over time) and then attach them to an element using animation properties. The browser smoothly interpolates between the states you define.

  • Define animation steps using @keyframes.
  • Attach the animation to an element using animation-name and friends.
  • Control duration, delay, repeats, direction, and easing curve.

? Key Concepts

  • @keyframes: Defines the animation steps using percentages (0% to 100%) or from/to.
  • animation-name: Connects an element to a @keyframes block.
  • animation-duration: Time for one full cycle (e.g., 2s, 500ms).
  • animation-delay: Wait time before the animation starts.
  • animation-iteration-count: Number of repeats (e.g., 1, 3, infinite).
  • animation-direction: Direction of play (e.g., normal, reverse, alternate).
  • animation-timing-function: Speed curve for the animation (e.g., ease, linear, ease-in).
  • animation-fill-mode: How styles apply before/after animation (forwards, backwards, both).
  • animation: Shorthand for all the above in a single line.

? Syntax / Theory

You typically write CSS animations in two parts: a @keyframes declaration and an element rule that uses animation-* properties.

? View Core Animation Syntax 
/* 1️⃣ Define the animation steps using keyframes */
@keyframes animationName {
0% { opacity: 0; transform: translateY(20px); }
50% { opacity: 0.5; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* 2️⃣ Attach the animation to an element */
.element {
animation-name: animationName;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
? Shorthand animation Property 
/* duration | timing-function | delay | iteration-count | direction | fill-mode | name */
.element {
animation: 2s ease-in-out 0.5s infinite alternate both animationName;
}

? Live Output

The box below moves left & right, grows slightly, and changes color using CSS animations.

 

? Explanation

  • At 0%, the box starts on the left, normal size, coral background.
  • At 50%, it moves right, scales up to 1.2, and turns gold.
  • At 100%, it returns to the left, normal size, deepskyblue background.
  • The alternate direction makes it move back and forth seamlessly.

? Full Example Code

? View Complete HTML + CSS Example 
<!-- Simple animated box using CSS animations -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Example</title>
<style>
@keyframes moveScale {
0% { transform: translateX(0) scale(1); background-color: coral; }
50% { transform: translateX(100px) scale(1.2); background-color: gold; }
100% { transform: translateX(0) scale(1); background-color: deepskyblue; }
}
.box {
width: 100px;
height: 100px;
background-color: coral;
border-radius: 12px;
animation: moveScale 3s ease-in-out 0s infinite alternate both;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

? Tips & Best Practices

  • Use animation-direction: alternate for smooth back-and-forth motion.
  • Combine transform, opacity, and background-color for rich effects.
  • Use animation-fill-mode: forwards to keep the final state after the animation ends.
  • Limit heavy animations on mobile to avoid battery drain and jank.
  • Prefer animating transform and opacity as they are GPU-friendly.
  • Be careful with long-running infinite animations on many elements.

? Try It Yourself

  • Create a button that gently pulses using transform: scale() and animation-iteration-count: infinite.
  • Make a box rotate 360 degrees using transform: rotate() inside @keyframes.
  • Stagger three elements by using different animation-delay values.
  • Experiment with animation-direction values like reverse and alternate-reverse.
  • Try replacing ease-in-out with linear and observe the difference in motion.