How to define the duration of an animation takes to complete in CSS?

The craft of website creation frequently necessitates scrupulous scrutiny of particulars and a perceptive comprehension of elegance. A fundamental component that can enhance the user's encounter with a website is animation. Nevertheless, the potency of an animation is largely hinged upon the time it takes to culminate. Truly, the chronometric facet of an animation is a critical variable in crafting a visually enthralling and engaging online adventure. Consequently, in this composition, we shall explore the complexities of specifying the duration of an animation using CSS, a crucial proficiency that can augment the caliber of website animation.

animation-duration Property

The CSS property known as animation-duration is utilized to establish the length of time required for an animation to complete a single cycle. It designates the time frame of an animation in seconds (s) or milliseconds (ms). The default setting for the animation-duration property is 0s, indicating that the animation transpires instantaneously and has no duration. When a value is assigned to the animation-duration property, the animation persists for the allotted duration before halting or restarting, based on the animation-iteration-count property.


animation-duration: <time>;

In this context, the <time> denotes the temporal span of the animation, expressed in seconds (s) or milliseconds (ms). The quantity can be a fractional or a whole number


To define the duration of an animation in CSS, follow these steps −

  • Define the animation using the @keyframes rule. This rule specifies the starting and ending points of the animation.

  • Apply the animation to an element using the animation-name property. This property links the animation to the element.

  • Indicate the span of the animation by utilizing the animation-duration attribute. This attribute establishes the quantum of time necessary for the animation to accomplish its sequence.

  • Optionally, set the number of times the animation should repeat using the animation-iteration-count property. This property controls how many times the animation should play before stopping.


The following HTML code segment above delineates the span of an animation in CSS. Firstly, the @keyframes decree explicates an animation that alters the backdrop color of an entity from red to yellow. The starting and ending points of the animation are designated by the from and to expressions in the @keyframes regulation. Here, the animation starts with a red background and culminates with a yellow background. Then, the div component is adorned with CSS attributes. The width and height attributes fix the size of the div entity, and the background-color property specifies the beginning background color as red. The animation-name attribute associates the animation laid out in the @keyframes regulation to the div entity. The animation-duration attribute determines the duration of the animation in seconds. In this instance, the animation will be two seconds long. Lastly, the animation-iteration-count attribute is set to an infinite value to generate an incessant animation loop until the user interacts with the webpage.

<!DOCTYPE html>
      <title>How to define the duration of an animation takes to complete in CSS?</title>
         @keyframes example {
            from {
               background-color: red;
            to {
               background-color: yellow;
         div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: example;
            animation-duration: 2s;
            animation-iteration-count: infinite;
      <h4>How to define the duration of an animation takes to complete in CSS?</h4>


In summary, the process of determining the specific time frame within which an animation concludes in CSS is a task that demands fastidious attention and purposeful contemplation. The confluence of sundry factors, such as animation intricacy and preferred user involvement, converge to determine the optimal duration. Therefore, it is of utmost importance for designers to be cognizant of these subtleties and apply them discerningly to their creations. By doing so, they can ensure that their animations not only mesmerize with their visual charm but also please with their impeccable execution.

Updated on: 05-May-2023


Kickstart Your Career

Get certified by completing the course

Get Started