An Introduction to CSS Animations

Author: Baden

June 28, 2023

Introduction

Animations in CSS allow you to bring your web pages to life by adding movement and visual effects. They can enhance the user experience, provide visual feedback, and create engaging interactions. With CSS animations, you can make your website more dynamic and captivating.

How to Create CSS Animations

CSS animations are created using the `@keyframes` rule and the `animation` property. The `@keyframes` rule allows you to define keyframes, which are the intermediate stages of an animation, and the `animation` property applies the animation to an element.

Let's take a look at a simple fade-in and fade-out animation as an example:

        
/* Define the animation */
@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
   /* Apply the animation to an element */
  .fade-in-out-element {
  animation: fade-in-out 2s ease-in-out infinite;
  }
}

Example usage:

Types of CSS Animations

CSS animations can be categorized into different types based on the effects they produce. Here are a few commonly used types:

1. Transitions

Transitions allow you to smoothly change the property values of an element over a specified duration. They are commonly used for hover effects or gradual transformations. In the following example, we create a transition animation that increases the width of a box when hovered over:

                
 /* Example of a transition animation */
 .box {
   width: 100px;
   height: 100px;
   background-color: blue;
   transition: width 1s ease-in-out;
 }
 
 .box:hover {
   width: 200px;
 }

Example usage: (Hover or tap)

2. Transformations

Transformations allow you to modify the appearance and position of an element. They include operations like scaling, rotating, translating, and skewing. In this example, we create a transformation animation that rotates a red square by 45 degrees on hover:

                
/* Example of a transformation animation */
.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease-in-out;
}
.rotate:hover {
  transform: rotate(45deg);
}

Example usage: (Hover or tap)

3. Keyframe Animations

Keyframe animations provide precise control over each step of an animation. You can define keyframes at specific percentages of the animation duration and specify different property values for each keyframe. This allows you to create complex and customized animations. Here's an example of a keyframe animation called "bounce" that continuously moves an element up and down:

                
/* Example of a keyframe animation */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce-element {
  animation: bounce 2s ease-in-out infinite;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

Example usage:

Conclusion

CSS animations are a powerful tool for adding visual appeal and interactivity to your web pages. By leveraging transitions, transformations, and keyframe animations, you can create engaging and dynamic effects that enhance the user experience. Experiment with different properties, durations, and timing functions to achieve the desired animation effects. With CSS animations, you have the ability to bring your website to life and make it more immersive and captivating.