CSS Animation Timing 🎯

Welcome to our comprehensive guide on CSS Animation Timing! In this lesson, we'll delve into the world of CSS animations, learning how to control the duration, delay, and easing of animations to create engaging and interactive web experiences.

Understanding CSS Animations 📝

Animation is the process of making an object move, change, or appear and disappear over time. In CSS, you can create animations using the @keyframes rule and the animation property.

css

@keyframes example-animation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.example-class {
  animation: example-animation 2s ease-in-out;
}

In the above example, we've defined an animation called example-animation that changes the opacity of an element from 0 to 1 over 2 seconds with a smooth easing effect.

Key Animation Properties 💡

Duration

The duration property specifies the length of time an animation runs. It's given in seconds (s) or milliseconds (ms).

css

.example-class {
  animation-duration: 2s;
}

Delay

The animation-delay property defines the amount of time an animation waits before starting.

css

.example-class {
  animation-delay: 1s;
}

Easing

The animation-timing-function or easing property defines the rate of change in the animation. The ease, linear, ease-in, ease-out, and ease-in-out functions are commonly used.

css

.example-class {
  animation: example-animation 2s ease-in-out;
}

Practical Example 📝

Let's create a simple animation that makes an image fade in and out.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation Timing</title>
  <style>
    @keyframes fade-in-out {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }

    .image-class {
      animation: fade-in-out 1s ease-in-out infinite;
    }
  </style>
</head>
<body>
  <img src="example.jpg" class="image-class" alt="Example Image">
</body>
</html>

In this example, we've created a simple HTML page with an image and a CSS animation that fades the image in and out every second in an infinite loop.

Quiz 🎯

We hope you enjoyed this tutorial on CSS Animation Timing! Keep practicing, and soon you'll be creating beautiful, interactive animations for your web projects. Happy coding! 🚀