HTML & CSS - Mastery / Advanced CSS Features

CSS Animation

🚀 CSS Animation

CSS Animations allow you to create smooth, controllable animations without JavaScript using keyframes and animation properties.

✏️ Basic Structure of CSS Animation

@keyframes animation-name {
  from {
    /* starting state */
  }
  to {
    /* ending state */
  }
}

Apply the animation to an element:

<body>
  <div class="element">Animated!</div>
</body>

📌 Summary

  • @keyframes defines the animation sequence.

  • Use animation-name, animation-duration, and other properties to control how the animation runs.

  • animation-fill-mode: forwards ensures the element stays in the final state after the animation ends.

💡Essential Animation Properties

Feature

Example

Description

@keyframes

@keyframes slideIn

Defines animation steps

animation-name

slideIn

Links keyframes

animation-duration

2s

Duration of animation

animation-iteration-count

infinite or 1

Repeats or runs once

animation-direction

alternate, reverse

Changes direction

animation-fill-mode

forwards, backwards

Retains styles after animation ends

❗️Shorthand Syntax

Instead of writing all animation properties separately, use shorthand:

animation: animation-name duration timing-function delay iteration-count direction fill-mode;

Example:

<body>
  <div class="box">Hello!</div>
</body>

🔹 Example: Slide In from Left

<body>
  <div class="box">Sliding In!</div>
</body>

🔹Looping Animation (e.g., Pulse)

<body>
  <div class="pulse-box">Pulse</div>
</body>

🔹 Combining Multiple Properties

<body>
  <div class="bounce-box">Bounce!</div>
</body>