Introduction

CSS Animations allow you to create dynamic and visually appealing effects without using JavaScript. They empower you to bring your web pages to life with smooth transitions and captivating movements.

CSS Animation

CSS animations are created using two key components:

1. Keyframes: Define specific points in time and their corresponding styles.
2. Animation Properties: Apply keyframes and control animation behavior.

Animation Declaration - @Keyframe

The @keyframes rule defines the different styles of the animation at specific times.

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

In this example, the animation starts at 0% (the beginning), moves 100px to the right at 50%, and returns to the original position at 100%.

animation-name

The animation-name property specifies the name of the @keyframes rule that applies to the element.

div {  animation-name: myAnimation;  /* refers to the @keyframes rule named 'myAnimation' */  }  

animation-duration

The animation-duration property sets the length of the animation. It's measured in seconds (s) or milliseconds (ms).

div {  animation-duration: 2s; /* animation takes 2 seconds */  }  

animation-delay

The animation-delay property defines how long the animation waits before it begins. It's also measured in seconds or milliseconds.

div {  animation-delay: 1s; /* animation starts after 1 second */  }  

animation-iteration-count

The animation-iteration-count property determines the number of times the animation will repeat. You can use a number for a specific count, 'infinite' for continuous repetition, or a fraction for a percentage of the animation.

div {  animation-iteration-count: 3; /* animation repeats 3 times */  }  

animation-direction

The animation-direction property specifies the direction of the animation.

div {  animation-direction: alternate; /* animation plays forward then backward */  }  

Possible values include:

• normal: The animation plays from the beginning to the end.
• reverse: The animation plays in reverse from the end to the beginning.
• alternate: The animation alternates between the beginning and end.
• alternate-reverse: The animation alternates between the end and the beginning.

animation-timing-function

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

div {  animation-timing-function: ease-in-out; /* slow start, fast middle, slow end */  }  

Common values include:

• linear: Constant speed throughout the animation.
• ease: A gradual start, then speeds up, and finally slows down.
• ease-in: Starts slowly and accelerates to the end.
• ease-out: Starts quickly and decelerates to the end.
• ease-in-out: Starts slowly, speeds up in the middle, and slows down at the end.

animation-fill-mode

The animation-fill-mode property defines the style of the element when the animation is not playing.

div {  animation-fill-mode: forwards; /* element retains its final style after the animation */  }  

Possible values include:

• none: The element is not styled during non-active periods.
• forwards: The element retains its final style after the animation ends.
• backwards: The element is styled according to the animation's beginning state before the animation starts.
• both: The element is styled according to the animation's beginning state before the animation starts and retains its final style after the animation ends.

Summary

• CSS Animations are a powerful way to bring your web pages to life.
• Keyframes define the styles at specific times during the animation.
• Animation properties control the animation's behavior, such as duration, delay, and direction.
• Experiment with different timing functions and fill modes for creative effects.