animation-name
The animation-name property links a @keyframes rule to an element. Use the exact name defined in @keyframes.
Set it to none to cancel a running animation.
CSS
Beginner
3 min read
animation-name Property
Example
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.spinner { animation-name: spin; }
.hero { animation-name: fadeIn; }
.paused { animation-name: none; } Pro Tip
Animation names are case-sensitive — spinIn and SpinIn are treated as different animations.