CSS3 Animations

By Codes With Pankaj

CSS3 Animations allow you to create complex, smooth animations by specifying keyframes and properties that change over time. With CSS3 animations, you can animate almost any CSS property, providing a powerful tool to enhance user experience and make your website more dynamic. This tutorial will explain how CSS3 animations work, how to create them, and provide practical examples.

What are CSS3 Animations?
How CSS3 Animations Work
Creating a Basic Animation
- Keyframes
- Animation Name
- Animation Duration
Animation Properties
- Animation Timing Function
- Animation Delay
- Animation Iteration Count
- Animation Direction
- Animation Fill Mode
- Animation Play State
Shorthand Syntax for Animations
Practical Examples
- Example 1: Bouncing Ball Animation
- Example 2: Fade In and Fade Out Animation
- Example 3: Spinning Loader Animation
Combining Multiple Animations
Cross-Browser Compatibility
Best Practices for Using Animations
Conclusion

1. What are CSS3 Animations?

CSS3 Animations allow you to animate CSS properties by defining keyframes and setting how those properties should change over time. Unlike CSS transitions, which are triggered by state changes like hover, CSS animations are independent and can loop, reverse, and be controlled programmatically.

Key Concept:

Animation: A sequence of keyframes that define how an element's properties should change over time.

Example:

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

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

Explanation:

This animation gradually fades in an element by animating the opacity property from 0 to 1 over 2 seconds, repeating infinitely.

2. How CSS3 Animations Work

CSS3 Animations are defined using @keyframes, which specify the styles the element should have at different points during the animation. You then apply the animation to an element by assigning it an animation property, which controls the duration, timing function, and other aspects of the animation.

Basic Process:

Define Keyframes: Use @keyframes to specify the start and end points (or any intermediate points) of the animation.
Assign the Animation: Apply the animation to an element using the animation property.
Control the Animation: Adjust properties like duration, timing function, and iteration count to control how the animation behaves.

Example Process:

Keyframes define an element scaling up from 1x to 1.5x size.
The animation is applied to the element with a 3-second duration and an ease-in-out timing function.

3. Creating a Basic Animation

To create a basic animation, you need to define the keyframes and then apply the animation to an element.

a. Keyframes

Keyframes define the styles the element will have at specific times during the animation. You can define these points using percentages (0% to 100%) or the keywords from and to.

Example:

@keyframes slidein {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

Explanation:

This keyframe animation moves an element from the left side of the screen to the right.

b. Animation Name

The animation-name property specifies which keyframes to use for the animation.

Example:

.element {
  animation-name: slidein;
}

Explanation:

The slidein animation is applied to the element.

c. Animation Duration

The animation-duration property sets how long the animation should take to complete one cycle.

Example:

.element {
  animation-duration: 2s;
}

Explanation:

The animation takes 2 seconds to complete.

4. Animation Properties

CSS3 Animations come with several properties that allow you to control the behavior of your animations.

a. Animation Timing Function

The animation-timing-function property controls the speed curve of the animation.

Common Values:

linear: Constant speed.
ease: Starts slow, speeds up, and then slows down.
ease-in: Starts slowly, then speeds up.
ease-out: Starts quickly, then slows down.
ease-in-out: Starts and ends slowly, with a faster middle.

Example:

.element {
  animation-timing-function: ease-in-out;
}

Explanation:

The animation starts and ends slowly, with a faster middle.

b. Animation Delay

The animation-delay property sets a delay before the animation starts.

Example:

.element {
  animation-delay: 1s;
}

Explanation:

The animation starts 1 second after being triggered.

c. Animation Iteration Count

The animation-iteration-count property sets how many times the animation should repeat.

Example:

.element {
  animation-iteration-count: 3;
}

Explanation:

The animation repeats 3 times. Use infinite for continuous looping.

d. Animation Direction

The animation-direction property controls whether the animation should play forward, backward, or alternate between the two.

Values:

normal: The animation plays forward.
reverse: The animation plays backward.
alternate: The animation alternates between playing forward and backward.
alternate-reverse: The animation alternates, starting in reverse.

Example:

.element {
  animation-direction: alternate;
}

Explanation:

The animation plays forward and then reverses, creating a back-and-forth effect.

e. Animation Fill Mode

The animation-fill-mode property specifies how styles are applied before and after the animation plays.

Values:

none: Default. The animation does not apply styles before or after it runs.
forwards: The animation retains the styles from the last keyframe after it ends.
backwards: The animation applies styles from the first keyframe during the delay period.
both: The animation applies both forwards and backwards rules.

Example:

.element {
  animation-fill-mode: forwards;
}

Explanation:

The element retains the final state of the animation after it completes.

f. Animation Play State

The animation-play-state property allows you to pause and resume an animation.

Values:

running: The animation is running.
paused: The animation is paused.

Example:

.element {
  animation-play-state: paused;
}

Explanation:

The animation is paused and can be resumed with JavaScript or another trigger.

5. Shorthand Syntax for Animations

You can define all the animation properties in one line using the shorthand animation property.

Shorthand Syntax:

selector {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

Example:

.element {
  animation: slidein 2s ease-in-out 0.5s 3 alternate forwards;
}

Explanation:

This shorthand applies the slidein animation with a 2-second duration, ease-in-out timing, 0.5-second delay, 3 iterations, alternate direction, and forwards fill mode.

6. Practical Examples

Let's explore some practical examples of using CSS3 animations.

Example 1: Bouncing Ball Animation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bouncing Ball Animation - codeswithpankaj</title>
  <style>
    @keyframes bounce {
      

 0%, 20%, 50%, 80%, 100% {
          transform: translateY(0);
       }
       40% {
          transform: translateY(-150px);
       }
       60% {
          transform: translateY(-75px);
       }
    }

    .ball {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      bottom: 0;
      animation: bounce 2s infinite;
    }
  </style>
</head>
<body>

<div class="ball"></div>

</body>
</html>

Explanation:

The ball bounces up and down infinitely, simulating a bouncing effect using keyframes.

Example 2: Fade In and Fade Out Animation

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

    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: fade 3s infinite;
    }
  </style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Explanation:

The box fades in and out continuously, creating a pulsing effect.

Example 3: Spinning Loader Animation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spinning Loader Animation - codeswithpankaj</title>
  <style>
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .loader {
      width: 50px;
      height: 50px;
      border: 5px solid lightgray;
      border-top: 5px solid blue;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  </style>
</head>
<body>

<div class="loader"></div>

</body>
</html>

Explanation:

The loader spins continuously, creating a spinning animation that could be used for a loading indicator.

7. Combining Multiple Animations

You can apply multiple animations to an element by separating each animation with a comma.

Example:

.element {
  animation: slidein 2s ease, fade 3s linear 1s infinite;
}

Explanation:

This example applies two animations to the element: a slide-in and a fade-in/out, each with its own duration, timing function, and iteration count.

8. Cross-Browser Compatibility

CSS3 animations are supported in all modern browsers. However, older versions of browsers like Internet Explorer may require vendor prefixes.

Example with Vendor Prefixes:

.element {
  -webkit-animation: slidein 2s ease;
  -moz-animation: slidein 2s ease;
  -o-animation: slidein 2s ease;
  animation: slidein 2s ease;
}

Explanation:

Including vendor prefixes ensures compatibility across different browsers.

9. Best Practices for Using Animations

When using CSS3 animations, consider the following best practices:

Keep It Subtle: Avoid overusing animations; subtle animations are often more effective and less distracting.
Optimize for Performance: Use hardware-accelerated properties like transform and opacity to ensure smooth animations.
Test Across Devices: Ensure your animations perform well on different devices, especially on mobile.
Combine with Transitions: Use transitions in combination with animations for more complex and polished effects.

10. Conclusion

CSS3 Animations provide a powerful way to create dynamic and engaging user experiences. By understanding how to create and control animations, you can enhance your web designs with smooth, interactive effects.

Keyframes: Define the start and end points (or any intermediate points) of the animation.
Animation Properties: Control the duration, timing, delay, iteration, direction, fill mode, and play state of the animation.
Shorthand Syntax: Use the shorthand animation property to define all animation properties in one line.

By mastering CSS3 animations, you can create visually appealing and interactive designs that captivate your users.

For more tutorials and insights, visit Codes With Pankaj.

PreviousCSS3 Transitions NextCSS3 Multi-Column Layouts

Last updated 2 months ago

Table of Contents

1. What are CSS3 Animations?

2. How CSS3 Animations Work

3. Creating a Basic Animation

a. Keyframes

b. Animation Name

c. Animation Duration

4. Animation Properties

a. Animation Timing Function

b. Animation Delay

c. Animation Iteration Count

d. Animation Direction

e. Animation Fill Mode

f. Animation Play State

5. Shorthand Syntax for Animations

6. Practical Examples

Example 1: Bouncing Ball Animation

Example 2: Fade In and Fade Out Animation

Example 3: Spinning Loader Animation

7. Combining Multiple Animations

8. Cross-Browser Compatibility

9. Best Practices for Using Animations

10. Conclusion