Keyframe Animations
CSS animations use @keyframes to define intermediate states. An element can then reference the keyframe sequence through the animation property.
Unlike transitions, animations can run independently of a direct state change and can contain multiple keyframes.
CSS Keyframe Animation
Fade-In Animation
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fade-in 400ms ease-out both;
}💡 The keyframes define the beginning and ending states and the animation declaration controls how they are played.
Key Takeaways
@keyframesdefines animation states.- CSS animations can run without a hover or focus state.
Knowledge Check
Which at-rule defines CSS animation keyframes?