CSS animation Property
Tags: learncss
Published: 2021-02-16 04:29:01

---
title: CSS animation Property
published: true
date: 2021-02-15 10:25:04 UTC
tags: LearnCSS
canonical_url: https://sharepointanchor.com/learn-css/css-animation-property/
---

The [CSS](https://sharepointanchor.com/learn-css/ "CSS") animation property is usually **used to animate CSS properties with distinct values**. In other words, it can **gradually change from one style to another**. Animation property is one of the **CSS3** properties.

**Note:** The animation property will not work if the tag contains the following values as **display: none** ; **visibility: hidden** ; **height: auto** ;

- The CSS animation property can be applied to the following things:
  - [**The @keyframes at-rule**](#h-the-keyframes-at-rule)
  - [**Animation-related Properties**](#h-animation-related-properties)
  - [**Animation-name**](#h-animation-name-property)
  - [**Animation-duration**](#h-animation-duration)
  - [**Animation-timing-function**](#h-animation-timing-function)
  - [**Animation-delay**](#h-animation-delay)
  - [**Animation-direction**](#h-animation-direction-property)
  - [**Animation-iteration-count**](#h-animation-iteration-count-property)
  - [**Animation-fill-mode**](#h-animation-fill-mode-property)
  - [**Animation-play-state**](#h-animation-play-state)
  - **[Multiple Animations](#h-multiple-animations)**

## The @keyframes at-rule:

If you want to apply the animation, then you have to **specify what should happen at the specific moments during the animation**. You can easily be defined this with the help of @keyframes at-rule.

During the animation, you can change the set of CSS styles many times. 0% is the beginning of the animation, 100% is the end of the animation.

## Example of animation with the @keyframes at-rule:

In the following code, we bind the animation inside the **<div>** tag. It will gradually change the color of the <div> element.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {

        padding: 50px;

        animation: pulse 4s infinite;
      }
      @keyframes pulse {
        0% {

          background-color: #1082CA;

        }
        50% {

          background-color: #010ED0;

        }
        100% {

          background-color: #4B0083;

        }
      }
    </style>
  </head>
  <body>

    <div class="element">Background of this text is animated using CSS3 animation property.</div>

  </body>
</html>

```

## Result:

By executing the above code, you can get the animated result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/igGtUV6XqP.gif)<figcaption>CSS animation</figcaption>

<script async src="//jsfiddle.net/Share_Point_Anchor/d6q3agxp/1/embed/html,result/"></script>

## Animation-related Properties: 

The animation-related properties are used to **set all the animation properties with a single declaration**. Let’s see the list of animation-related properties below.

```

@keyframes pulse {
  /* declare animation actions here */
}

.element {

  animation-name: pulse;

  animation-duration: 3.5s;

  animation-timing-function: ease-in;

  animation-delay: 1s;

  animation-direction: alternate;

  animation-iteration-count: infinite;

  animation-fill-mode: none;

  animation-play-state: running;

}
.element {
  animation: pulse 3.5s ease-in 1s alternate infinite none running;
}

```

## Animation-name property:

It defines the name of the @keyframes-rule that you want to apply.

```

animation-name: keyframe-name | none | initial | inherit

```

## Example of the Animation-name Property:

In this code, we have applied the animation property with animation-name.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;

        animation: element 4s infinite;

      }
      @keyframes element {
        0% {

          background-color: #8FFF8A;

        }
        50% {

          background-color: #52FF2D;

        }
        100% {

          background-color: #B0FF00;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-name example</h2>

    <div>The name of the animation is set as "element".</div>

  </body>
</html>

```

## Result:

This is the output of the above code.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/UPSKH3aZDv.gif)<figcaption>Animation-name </figcaption>

## Animation-duration:

This property plays a major role in animation. Because it **defines the length of the time** that animation will take to complete one cycle. If it is not specified, then the animation will not work.

```

animation-duration: time | initial | inherit

```

## Example of the Animation-duration Property:

In the below example code, we use the animation-duration property. Let’s see how it works.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {

        padding: 50px;
        animation: pulse 7s infinite;

      }
      @keyframes pulse {

        0% {

          background-color: #7EE8FA;

        }
        50% {

          background-color: #EEC0C6;

        }
        100% {

          background-color: #9FA4C4

        }
      }
    </style>
  </head>
  <body>

    <div class="element">Background of this text is animated using CSS3 animation property</div>

  </body>
</html>

```

## Result:

By running the above code, you will get the animated output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/KBuhs3mkpF.gif)<figcaption>animation-duration property</figcaption>

## Animation-timing-function:

This property will define how the animation will progress over the duration of each cycle.

```

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

```

## Example of the Animation-timing-function Property with linear Value:

The following code shows the animation-timing-function property with the linear value.

```

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {

        width: 100px;

        height: 100px;

        border-radius: 50%;

        background: #06006A;

        position: relative;

        -webkit-animation: element 5s infinite;
        
        -webkit-animation-timing-function: linear;
        
        animation: element 5s infinite;

        animation-timing-function: ease;

      }
     
      @-webkit-keyframes element {
        from {

          left: 0px;

        }
        to {

          left: 200px;

        }
      }
      @keyframes element {
        from {

          left: 0px;

        }
        to {

          left: 200px;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-timing-function example</h2>

    <div></div>
  </body>
</html>

```

## Result:

This is the output of the above code.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/2tlyfV0HSC.gif)<figcaption>Animation-timing-function property</figcaption>

## Animation-delay

The Animation-delay property will **set the time between the element being loaded and the start of the animation**.

```

animation-delay: time | initial | inherit

```

## Example of the Animation-delay Property:

The following code sets the animation delay to 3 seconds. Thus, the animation starts after 3 seconds.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 120px;

        height: 120px;

        background: #00B69E;

        position: relative;

        animation: delay 5s infinite;

        animation-delay: 3s;
      }
      @keyframes delay {
        from {

          left: 0px;

        }
        to {

          left: 300px;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-delay example</h2>

    <p>Here the animation starts after 3 seconds.</p>

    <div></div>
  </body>
</html>

```

## Result:

The following image has shown the output of the above code.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/NVWCXiiJm1.gif)<figcaption>Animation-delay property</figcaption>

## Animation-direction Property: 

This property defines whether the animation should play in reverse order on alternate cycles or not.

```

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

```

- In animation-direction property, the following values can be applied:
  - **normal** – It is a **default** value. This value will help to play the animation in the forwarding direction (keyframes 0% – 100%). 
  - **reverse** – Animation plays in backward direction (keyframes (100% – 0%).
  - **alternate** – When you apply this value, the animation is played forward, and then it is reversed and repeated.
  - **alternate-reverse** – The animation is played backward then forward. 

## Example of the Animation-direction property:

Here, we will show you the code using animation-direction with the normal value.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 120px;

        height: 120px;

        background: #ccc;

        position: relative;

        animation: myfirst 5s 1;

        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {

          background: #8DC3CF;

          left: 0px;

          top: 0px;
        }
        25% {

          background: #1c87c9;

          left: 200px;

          top: 0px;
        }
        50% {

          background: #030E10;

          left: 200px;

          top: 200px;
        }
        75% {

          background: #666;

          left: 0px;

          top: 200px;
        }
        100% {

          background: #8ebf42;

          left: 0px;

          top: 0px;
        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-direction example</h2>

    <p>Here the animation plays backwards.</p>

    <div></div>
  </body>
</html>

```

## Result:

By executing the above code, you can get the output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/rg6webFy0g.gif)<figcaption>Animation-direction property</figcaption>

## Animation-iteration-count Property: 

Using this property, you can set the number of times an animation cycle should be played before stopping. Its **default value** is **1** , and also you can set any positive values.

**Note** : If you give zero or any negative value, then the animation will not play.

```

animation-iteration-count: number | infinite | initial | inherit

```

## Example of Animation-iteration-count Property:

In the following code, we set two elements with two different animation-iteration-counts. The iteration count of the first element is **3** , and the second element is **2**.

```

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {

        margin: 0;

        padding: 0;
      }
      div {

        position: relative;

        width: 100px;

        height: 100px;

        margin: 30px 0;

        border-radius: 50%;

        animation-name: pulse;
      }
      .element-one {

        background-color: #B279A7;

        animation-duration: 3s;

        animation-iteration-count: 3;

      }
      .element-two {

        margin: 0;

        background-color: #6B0F1A;

        animation-duration: 5s;

        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {

          left: 0;

        }
        50% {

          left: 50%;

        }
        100% {

          left: 0;

        }
      }
    </style>
  </head>
  <body>

    <h2>The animation-iteration-count example</h2>

    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>

    <div class="element-one"></div>

    <div class="element-two"></div>
  </body>
</html>

```

## Result:

After executing the above code, you will see the output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/iO1xCdzA8a.gif)<figcaption>Animation-iteration-count property</figcaption>

## Animation-fill-mode Property:

The animation-fill-mode property is used to specify a style for the element applied before or after the animation is executed.

```

animation-fill-mode: none | forwards | backwards | both | initial | inherit

```

- This property will allow the following values.
  - **forwards** – This value specifies that the element should keep the style values set by the **last** keyframe.
  - **backwards** – It specifies that the element should keep the style values set by the **first** keyframe.
  - **both** – It can specify that the animation should follow the rules for both forward and backward.
  - **none** – It is a default value. This value specifies that no style will be applied to the element before or after the animation is executed. 

## Example of Animation-fill-mode Property with the “backwards” value:

In the below code, we use animation-fill-mode property with the backwards value.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;

        height: 100px;

        background: #90D5EC;

        position: relative;

        -webkit-animation: element 5s;
        
        -webkit-animation-fill-mode: forwards;
        
        animation: element 5s;

        animation-fill-mode: backwards;
      }
      
      @-webkit-keyframes element {
        from {

          top: 0px;

        }
        to {

          top: 200px;

          background-color: blue;
        }
      }
      @keyframes element {
        from {

          top: 0px;

        }
        to {

          top: 200px;

          background-color: #FC575E;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-fill-mode example</h2>

    <div></div>
  </body>
</html>

```

## Result:

By running the above code, we will get the output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/wrVCbla6HV.gif)<figcaption>Animation-fill-mode property</figcaption>

## Animation-play-state: 

This property will specify whether the animation is played or paused. The default value of this property is “ **running** “.

```

animation-play-state: paused | running | initial | inherit

```

## Example of the Animation-Play-State property:

The below code uses the animation-play-state property with the **running** value.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 150px;

        height: 150px;

        background: #9E8FB2;

        position: relative;

        animation: play 10s;

        animation-play-state: running;

      }
      @keyframes play {
        from {

          left: 0px;

        }
        to {

          left: 200px;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-play-state example</h2>

    <p>Here the animation-play-state is set to "running".</p>

    <div></div>
  </body>
</html>

```

## Result:

After executing the above code, you will get the result ash shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/QzKAIWJQid.gif)<figcaption>Animation-play-state property</figcaption>

## Multiple Animations:

You can declare multiple animations on a selector, to do this, you need to separate the values with commas.

## Example of multiple animations on a selector:

The below code is the example of multiple animations on a selector.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {

        height: 100%;

        margin: 0;
      }
      body {

        display: flex;

        align-items: center;

        justify-content: center;

      }
      .element {

        height: 200px;

        width: 200px;

        background-color: #1c87c9;

        animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
      }
      @keyframes pulse {
        0%,
        100% {

          background-color: #8ebf42;

        }
        50% {

          background-color: #1c87c9;

        }
      }
      @keyframes nudge {
        0%,
        100% {

          transform: translate(0, 0);

        }
        50% {

          transform: translate(150px, 0);

        }
        80% {

          transform: translate(-150px, 0);

        }
      }
    </style>
  </head>
  <body>

    <div class="element"></div>

  </body>
</html>

```

## Result:

The above code gives the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/fnimte7yHr.gif)<figcaption>Multiple-animations property</figcaption>

## Browser Support: 

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_n9PdKkEBo1.png)<figcaption>Browser support</figcaption>

The post [CSS animation Property](https://sharepointanchor.com/learn-css/css-animation-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).