જ્યારે ટ્રાન્સીશન્સ બે સ્થિતિઓ વચ્ચે એનિમેট કરે છે, @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 (ping-pong), 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 એનિમેશન લોડર્સ, ધ્યાન સંકેતો, પ્રવેશ અને લૂપિંગ ઇફેક્ટ્સને શક્તિ આપે છે જે ટ્રાન્સીશન્સ વ્યક્ત કરી શકતા નથી (બહુ-પગલું, આપોઆપ-ચાલુ, અનંત).
શોર્ટહેન્ડ જાણવું, સુમુથનેસ માટે transform/opacity પર વળગી રહેવું અને prefers-reduced-motion સમ્માન કરવું તમને સમૃદ્ધ ગતિ બનાવવા દે છે જે કામગીરી અને સુલભ રહે છે.