In this article, we will learn about Animations in CSS.

Animations in CSS

The Animation property in CSS is used to animate transitions from one CSS style configuration to another.

A style describing the CSS animation and a set of keyframes indicating the start and end states of the animation’s style, as well as possible intermediate waypoints, make up an animation.

The timing function, duration, number of repetitions, and other attributes of these keyframe animations can be specified to control their behavior.

Advantages of CSS Animations

CSS animations have three major advantages over traditional script-driven animation techniques:

• They’re simple to use for simple animations, and you don’t even need to know JavaScript to make them.
• Even under moderate system load, the animations run smoothly. In JavaScript, simple animations often perform poorly. To keep the performance as smooth as possible, the rendering engine can use frame-skipping and other techniques.
• Allowing the browser to control the animation sequence allows the browser to improve performance and efficiency by reducing the update frequency of animations in tabs that aren’t currently visible.

Customizing an CSS Animation

To make a CSS animation, firstly we need to style the element we want to animate. Then we use to animation property to animate the selected element.

The animation property will let us configure the timing, duration, and other details of how the animation sequence should progress.

But this property does not affect the appearance of the animation, the appearance of the animation will be controlled by the @keyframes.

@keyframes

When you include CSS styles in the @keyframes rule, the animation will transition from the current style to the new style at specific points.

Specify when the style change will occur in percent or with the keywords(also known as keyframes-selectors) “from” and “to,” which are equivalent to 0% and 100%. 0% represents the start of the animation, and 100% represents the end of the animation.

You can change the set of CSS styles as many times as you want during the animation.

To make an animation work, it must be bound to an element.

Syntax:

@keyframes animationname {
                          keyframes-selector {
                                              from {
                                                    css-styles;
                                                    }
                                              to {
                                                  css-styles;
                                                  }
                                              }
                          }

Properties of CSS Animation

animation-name

The animation-name property is used to specify a name for the @keyframes animation.

Syntax:

selector {
          animation-name: keyframename|none|initial|inherit;
          }

Example:

div {
     animation-name: Developersdome;   /* The name of animation could be anything */
     }

animation-duration

The animation-duration property is used to define that how long an animation should take to complete one cycle.

Syntax:

selector {
          animation-duration: time|initial|inherit;
          }

Example:

div {
     animation-duration: 5s;
     }

animation-timing-function

The animation-timing function defines an animation’s speed curve.

The speed curve specifies how long it takes animation to transition from one set of CSS styles to another.

The speed curve is used to smooth out the changes.

Syntax:

selector {
          animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
          }

Example:

div {
     animation-timing-function: linear;
     }

animation-delay

The animation delay property specifies a delay before animation begins.

The animation delay is specified in seconds (s) or milliseconds (ms) (ms).

Negative values are also allowed for animation-delay property. When we assign a negative value, the animation will already be executed for that much time and start over from there.

Syntax:

selector {
          animation-delay: time|initial|inherit;
          }

Example:

div {
     animation-delay: 3s;
     }

animation-iteration-count

The animation-iteration-count property is used to specify that how many times that animation should be played.

If you want that the animation should not stop and repeat continuously then set the value of the animation-iteration-count property to infinite.

Syntax:

selector {
          animation-iteration-count: number|infinite|initial|inherit;
          }

Example:

div {
     animation-iteration-count: 7;
     }

animation-direction

The animation-direction property is used to define in which direction the animation should be played forward, backward, or in alternate cycles.

Syntax:

selector {
          animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
          }

Example:

div {
     animation-direction: alternate;
     }

animation-fill-mode

When the animation is not playing, the animation-fill-mode property specifies a style for the element i.e before the animation starts and after the animation ends or both.

CSS animations have no effect on the element either before or after the first keyframe is played. This behavior can be overridden by the animation-fill-mode property.

Syntax:

selector {
          animation-fill-mode: none|forwards|backwards|both|initial|inherit;
          }

Example:

div {
     animation-fill-mode: backwards;
     }

animation-play-state

The animation-play-state property is used to specify that is the animation is running or paused.

We can pause and resume the animation sequence using this property in JavaScript.

Syntax:

selector {
          animation-play-state: paused|running|initial|inherit;
          }

Example:

div {
     animation-play-state: running;
     }

Then we have the CSS Animation Shorthand property in which we can define multiple animation properties at a time.

Animation Shorthand Property

The animation shorthand property is used to specify multiple animations properties at a single time using the animation keyword.

Syntax:

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

Example:

div {
     animation: developersdome 3s linear 1s infinite alternate both running;
     }

@keyframes developersdome {
                           0% {
                               left: 0%;
                               }
                           100% {
                                 left: 500px;
                                }
                           }

Output:

That’s all about the Animations in CSS.

You may like Text Shadow and Box Shadow in CSS.

Hope this article will guide you to recognize all about the Animations in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.