CSS Keyframes
Keyframes let you create complex animations by defining intermediate steps. This tutorial walks through the syntax, usage, and practical examples.
Basic Syntax
@keyframes name {
from { /* styles */ }
to { /* styles */ }
}
/* or */
@keyframes name {
0% { /* styles */ }
50% { /* styles */ }
100% { /* styles */ }
}Applying an Animation
.element {
animation: name duration timing-function delay iteration-count direction fill-mode;
}