The animation-duration CSS property sets the length of time that an animation takes to complete one cycle.

Try it

It is often convenient to use the shorthand property animation to set all animation properties at once.


/* Single animation */
animation-duration: 6s;
animation-duration: 120ms;

/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

/* Global values */
animation-duration: inherit;
animation-duration: initial;
animation-duration: revert;
animation-duration: revert-layer;
animation-duration: unset;



The time that an animation takes to complete one cycle. This may be specified in either seconds (s) or milliseconds (ms). The value must be positive or zero and the unit is required.

If no value is provided, the default value of 0s is used, in which case the animation still executes (the animationStart and animationEnd events are fired). Whether or not the animation will be visible when the duration is 0s will depend on the value of animation-fill-mode, as explained below:

  • If animation-fill-mode is set to backwards or both, the first frame of the animation as defined by animation-direction will be displayed during animation-delay countdown.
  • If animation-fill-mode is set to forwards or both, the last frame of the animation will be displayed, as defined by animation-direction, after the animation-delay expires.
  • If animation-fill-mode is set to none, the animation will have no visible effect.

Note: Negative values are invalid, causing the declaration to be ignored. Some early, prefixed, implementations may consider them as identical to 0s.

Note: When you specify multiple comma-separated values on an animation-* property, they are applied to the animations in the order in which the animation-names appear. For situations where the number of animations and animation-* property values do not match, see Setting multiple animation property values.

Formal definition

Initial value 0s
Applies to all elements, ::before and ::after pseudo-elements
Inherited no
Computed value as specified
Animation type Not animatable

Formal syntax

animation-duration = 
<time [0s,∞]>#


Setting animation duration

This animation has an animation-duration of 0.7 seconds.


<div class="box"></div>


.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;

@keyframes rotate {
  0% {
    transform: rotate(0);
  100% {
    transform: rotate(360deg);


Hover over the rectangle to start the animation.

See CSS animations for more examples.


Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
animation-duration 433 1212 49165
10Once the element has loaded, changing the value of this property has no effect.
301512.1–1512–15 94 432 4318 49165 301412.1–1412–14 94.2 4.01.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.