@keyframes
Defines the steps of a CSS animation. You specify exactly which styles should change at specific points (0% to 100%) during the animation sequence.
It is documented as part of the CSS Animations specification.
Syntax
/* Usage Example */
@keyframes fadeIn {
from{ opacity: 0; transform: translateY(10px); }
to{ opacity: 1; transform: translateY(0); }
}
.fade-in-element{
animation: fadeIn 0.5s ease-out forwards;
}@keyframes Browser support
Widely available
Since
2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
43+
16+
9+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more