animation
Published Jul 8, 2021Updated Sep 2, 2024
Contribute to Docs
Shorthand property that sets the animations for an element.
Syntax
animation: <value>;
where <value>
can be any of the following keywords:
animation-fill-mode
:forwards
animation-delay
:2s
animation-duration
:4s
animation-iteration-count
:infinite
animation-direction
:alternate
animation-timing-function
:linear
animation-name
: keyframes ruleanimation-play-state
:running
Note: If you do not specify animation-duration
property, the default value is 0s
, resulting in the animation not being played. The order of time values is important. The first will be applied to animation-duration
and the second to animation-delay
.
Example 1
Set fadetowhite
animation to run two seconds, loop infinitely, and alternate directions:
div {height: 100px;width: 100px;background-color: #000;animation: fadetowhite 2s infinite alternate;}@keyframes fadetowhite {from {background-color: #000;}to {background-color: #fff;}}
The following gif runs as a loop to demonstrate the code block above:
Example 2
Set party
animation to last for two seconds, delay one second, loop five times and run in reverse:
div {height: 100px;width: 100px;background-color: pink;animation: party 2s 1s 5 reverse;}@keyframes party {0% {background-color: red;}25% {background-color: green;}50% {background-color: blue;}75% {background-color: yellow;}100% {background-color: purple;}}
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