CSS animation-duration Property

CSS animation-duration property specifies the time that the animation takes to complete its one cycle.

The duration time is specified in seconds(s) or milliseconds(ms). By default, the duration time is set to 0s, which means that the animation happens instantly and we can not observe it.

The higher the value of the animation duration, the slower the animation. See implementation in the below example:


  animation-name: moveRight;
  animation-duration: 5s; 
  animation-name: moveRight;
  animation-duration: 8s; 

CSS Syntax

The animation-duration property has the following syntax:

animation-duration: time|initial|inherit;

Property Values

The animation-duration property accepts the following values:

timeSpecifies the animation duration time in seconds(s) or milliseconds(ms). The default value is 0.
initialSets the animation-duration property to its default value(0).
inheritInherits the animation-duration property from the parent element.

General Info

Default Value0
JavaScript Usageelement.style.animationDuration = “5s”


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment