animation-duration
Published Jul 1, 2021Updated May 15, 2024
Contribute to Docs
Defines how long an animation should take to complete.
Syntax
animation-duration: <value>;
where <value>
can be one of the following:
- Seconds:
2s
- Milliseconds:
200ms
Note: If not provided, an animation will not occur because the default value is 0s
.
Example 1
Change color of box from blue
to white
over a duration of 2
seconds:
div {height: 200px;width: 200px;background-color: blue;animation-name: disappear;animation-duration: 2s;}@keyframes disappear {from {background-color: blue;}to {background-color: white;}}
The following gif runs as a loop to demonstrate the code block above:
Example 2
Provide a second duration value to determine the duration of an additional animation:
div {height: 200px;width: 200px;background-color: blue;animation-name: fadeoutfadein, slideleft;animation-duration: 4s, 5000ms;}@keyframes fadeoutfadein {0% {background-color: blue;}50% {background-color: white;}100% {background-color: blue;}}@keyframes slideleft {from {margin-left: 100%;}to {margin-left: 0%;}}
The following gif runs as a loop to demonstrate the code block above:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours