CSS animation-duration property
Tags: learncss, cssa
Published: 2021-05-10 05:26:25

---
title: CSS animation-duration property
published: true
date: 2021-02-19 11:43:04 UTC
tags: LearnCSS,CSSA
canonical_url: https://sharepointanchor.com/learn-css/css-animation-duration-property/
---

The animation-duration property 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. This property plays a major role in animation.

The **default value** for the animation-duration property is **0** , which means that the animation starts immediately. It is one of the **CSS3** properties. The duration can be specified in **seconds** ( **s** ) or **milliseconds** ( **ms** ).

![⚠](https://s.w.org/images/core/emoji/13.0.1/72x72/26a0.png) **Note:** The negative values are invalid in this property, and they will be ignored.

- The animation-duration property accepts the following values.
  - **time**
  - **initial**
  - **inherit**

## Animation-duration property characteristics:

| **Initial Value** | 0 |
| **Applies to** | All elements, It also applies to **`::before`** and **`::after`** pseudo-elements. |
| **Inherited** | No |
| **Animatable** | No |
| **Version** | CSS3 |
| **JavaScript Syntax** | **`object.style.animationDuration = "4s";`** |

## Syntax:

```

animation-duration: time | initial | inherit;

```

## Values:

| **Value** | **Description** |
| --- | --- |
| **time** | Its **default value** is **0**. It specifies the **length of time an animation takes to cycle**. |
| **initial** | It makes the property **use its default** value. |
| **inherit** | This will **inherit the property from its parent** element. |

## Example of 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>

## Example of animation-duration property having a duration of 6 seconds: 

```

<!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: #7F01FD;

        animation: nudge 6s ease infinite alternate, nudge 6s linear infinite alternate;

      }
      @keyframes nudge {
        0%,
        100% {

          transform: translate(0, 0);

        }
        60% {

          transform: translate(150px, 0);

        }
        80% {

          transform: translate(-150px, 0);

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

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

  </body>
</html>

```

## Result:

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

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

## Browser-Support:

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

**Related Posts:**

- [CSS animation Property](https://sharepointanchor.com/learn-css/css-animation-property/)
- [CSS animation-delay Property](https://sharepointanchor.com/learn-css/css-animation-delay-property/)
- [HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)
- [CSS all Property](https://sharepointanchor.com/learn-css/css-all-property/)

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