DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

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 ).

⚠ 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;

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

animation-duration property

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Output of animation-duration property

Browser-Support:

Browser-support

Related Posts:

The post CSS animation-duration property appeared first on Share Point Anchor.

Top comments (0)