Lecture 13: CSS Animations – Bringing Elements to Life

Welcome to Lecture 13 of the "Basic to Brilliance" course! In this post, we will explore CSS Animations—a powerful way to add life to your web elements by animating them over time. With CSS animations, you can create smooth, dynamic effects that enhance user experience and engagement.

1. CSS Animations Overview

CSS animations allow elements to transition between different styles over a defined period. You can control how the animation works using two key properties:

• @keyframes: Defines the animation’s behavior at specific moments in time.
• animation: Applies the animation to an element and controls its timing and duration.

2. The @keyframes Rule

The @keyframes rule specifies the styles the element should have at different points during the animation. You define keyframes at various percentages (0% being the start, 100% being the end).

• Example: Basic keyframe animation to change the background color.

  @keyframes changeColor {
    0% {
      background-color: red;
    }
    100% {
      background-color: blue;
    }
  }

In this example:

• The background color will gradually change from red to blue as the animation progresses.

3. Applying Animations with the animation Property

To apply the animation to an element, you use the animation property. This property requires a few key values:

• Name: The name of the keyframes animation (e.g., changeColor).
• Duration: How long the animation should run (e.g., 2s for 2 seconds).
• Timing Function: The speed curve of the animation (e.g., ease, linear).

• Delay: How long to wait before starting the animation.

• Example: Applying an animation to an element.
  

  .box {
    animation: changeColor 2s ease-in-out infinite;
  }

In this case:

• The .box element will change color from red to blue over 2 seconds, following an ease-in-out curve, and the animation will repeat infinitely.

4. Animation Timing Functions

The timing function controls how the animation progresses over time. Some common timing functions include:

• linear: The animation progresses at a constant speed.
• ease: The animation starts slow, speeds up, then slows down.
• ease-in: The animation starts slow and speeds up.

• ease-out: The animation starts fast and slows down.

• Example: Applying a different timing function.
  

  .box {
    animation: changeColor 3s linear;
  }

Here:

• The animation will progress at a constant speed, taking 3 seconds to complete.

5. Animation Iteration and Delay

You can control how many times an animation repeats using the animation-iteration-count property. You can also delay the start of the animation using animation-delay.

• Example: An animation that repeats 3 times and starts after a 1-second delay.

  .box {
    animation: changeColor 2s ease-in 3;
    animation-delay: 1s;
  }

In this case:

• The animation will begin 1 second after the page loads and repeat 3 times.

6. Animation Fill Mode

The animation-fill-mode property defines how an element should look before and after the animation. Common values include:

• none: The element returns to its original state after the animation.
• forwards: The element retains the final state of the animation.

• backwards: The element takes on the initial state before the animation starts.

• Example: Keeping the final state after the animation.
  

  .box {
    animation: changeColor 2s ease forwards;
  }

Here:

• The element will remain blue after the animation completes, instead of reverting to red.

7. Multiple Animations

You can apply multiple animations to an element by separating them with commas.

• Example: Animating both color and position.

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

  .box {
    animation: changeColor 2s ease, moveBox 2s ease-in-out;
  }

In this case:

• The .box will change color and move 100px to the right at the same time.

8. Browser Support and Prefixed Properties

While modern browsers support CSS animations, it’s always a good idea to add vendor prefixes for older versions of browsers.

• Example: Adding vendor prefixes.

  .box {
    -webkit-animation: changeColor 2s ease;
    -moz-animation: changeColor 2s ease;
    animation: changeColor 2s ease;
  }

This ensures compatibility across different browsers.

Practice Exercise

1. Create a bouncing ball animation using @keyframes that makes the ball move up and down smoothly.
2. Add an animation to an image that rotates it 360 degrees on hover.

Next Up: In the next lecture, we’ll explore CSS Transitions, which allow you to animate changes in CSS properties smoothly. You’ll learn how to create engaging hover effects and other interactions that enhance user experience.

follow me on LinkedIn

Ridoy Hasan