@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.
Quick 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.
Safe to use without fallbacks.
43+
16+
9+
12+