@keyframes
robgmerrill124 total contributions
Published Jul 8, 2021Updated Oct 4, 2023
Contribute to Docs
Controls an animation with multiple intermediate steps, defining the values of the properties at each keyframe.
Syntax
@keyframes animation-name {<keyframe-selector> {<keyframe-declaration>}<keyframe-selector> {<keyframe-declaration>}}
<keyframe-selector>
: The selector for the element(s) to which the keyframe declaration should be applied.<keyframe-declaration>
: The declaration block of the keyframe, made up of the property/value pairs.
NOTE: if you are only defining two keyframes, you can use the keywords from
and to
which are the same as 0%
and 100%
respectively for the <keyframe-selector>
. Further customization on the animation
property allows you to specify how many times an animation should play, duration of animation, change the direction of an animation, and much more.
Example 1
Run the keyframes rule fade
for a duration of two seconds:
div {height: 200px;width: 200px;background-color: black;animation-duration: 2s;animation-name: fade;}@keyframes fade {from {background-color: black;}to {background-color: white;}}
The following gif runs as a loop to demonstrate the code block above:
Example 2
Run the keyframes rule fadeoutfadein
for a duration of two seconds:
div {height: 200px;width: 200px;background-color: black;animation-duration: 4s;animation-name: fadeoutfadein;}@keyframes fadeoutfadein {0% {background-color: black;}20% {background-color: white;}40% {background-color: black;}60% {background-color: black;}80% {background-color: white;}100% {background-color: black;}}
The following gif runs as a loop to demonstrate the code block above:
All contributors
- robgmerrill124 total contributions
- jameskeezer11 total contributions
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill
- jameskeezer
- christian.dinh
- Anonymous contributor
Looking to contribute?
- 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.