ట్రాంజిషన్లు రెండు స్థితుల మధ్య యానిమేట్ చేసేటప్పుడు, @keyframes యానిమేషన్లు బహు-దశల సీక్వెన్సును నిర్వచిస్తాయి, ఇది స్వయంచాలకంగా, లూప్గా మరియు అనేక ఇంటర్మీడియట్ స్థితుల ద్వారా నడుస్తుంది.
slide-in {
{ : (-); : ; }
{ : (); : ; }
}
{
: slide-in ease-out;
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); } /* peak of the bounce */
100% { transform: translateY(0); }
}
శాతాలు మీరు ఒక యానిమేషనలో అనేక దశలను కోరియోగ్రాఫ్ చేయడానికి అనుమతిస్తాయి — సాధారణ ట్రాంజిషన్తో అసంభవం.
.spinner {
animation: spin 1s linear infinite;
/* │ │ │ └── iteration-count (infinite = loop forever) */
/* │ │ └───────── timing function */
/* │ └────────────── duration */
/* └─────────────────── @keyframes name */
}
@keyframes spin { to { transform: rotate(360deg); } } /* classic loading spinner */
ఇతర లక్షణాలు: animation-delay, animation-direction: alternate (పింగ్-పాంగ్), animation-fill-mode: forwards (చివరి స్థితిని నిలుపుకోండి), animation-play-state: paused.
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animating width/height/top forces layout every frame → jank */
@keyframes bad { to { width: 300px; top: 50px; } }
Keyframe యానిమేషన్లు ప్రతి ఫ్రేమ్లో నడుస్తాయి, కాబట్టి లేআউట్-ట్రిగర్ చేసే లక్షణాలను యానిమేట్ చేయడం transform/opacity యానిమేట్ చేయడం కంటే చాలా ఖరీదైనది.
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; } /* honor users sensitive to motion */
}
Keyframe యానిమేషన్లు లోడర్లు, అటెన్షన్ క్యూలు, ఎంట్రాన్సులు మరియు ట్రాంజిషన్లు వ్యక్తపరచలేని లూపింగ్ ఎఫెక్ట్లను (బహు-దశ, స్వయంచాలక-నడుస్తున్న, అనంతమైన) శక్తివంతం చేస్తాయి.
Shorthand తెలుసుకోవడం, smoothness కోసం transform/opacityకు కట్టుబడ్డం, మరియు prefers-reduced-motion ని గౌరవించడం చేతనిచేస్తుంది సমృద్ధమైన మోషన్ను సమర్థవంతమైన మరియు ప్రవేశయోగ్యంగా నిర్మించండి.