Ndërsa tranzicionet animojnë ndërmjet dy gjendjesh, animacionet @keyframes përcaktojnë një sekuencë me shumë hapa që mund të veprojnë automatikisht, të përsëriten dhe të lëvizin nëpër shumë gjendje ndërmjetëse.
slide-in {
{ : (-); : ; }
{ : (); : ; }
}
{
: slide-in ease-out;
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); } /* peak of the bounce */
100% { transform: translateY(0); }
}
Përqindjet ju lejojnë të koordinoni disa faza në një animacion — e pamundur me një tranzicion të thjeshtë.
.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 */
Proprietete të tjera: animation-delay, animation-direction: alternate (ping-pong), animation-fill-mode: forwards (mbani gjendjen përfundimtare), 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; } }
Animacionet e keyframe veprojnë në çdo kornizë, kështu që animimi i pronave që shkaktojnë ndryshim të paraqitjes është shumë më i shtrenjtë sesa animimi i transform/opacity.
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; } /* honor users sensitive to motion */
}
Animacionet e keyframe fuqizojnë ngarkesat, kërkesave për vëmendje, hyrjet dhe efektet looping që tranzicionet nuk mund t'i shprehni (shumë-hapa, auto-funksionues, të pafund).
Njohja e shkurtesës, mbetja në transform/opacity për butësi dhe respektimi i prefers-reduced-motion ju lejon të ndërtoni lëvizje të pasur që mbeten efikase dhe të arritshme.