Filwaqt li t-transizzjonijiet janimaw bejn iż-żewġ stati, l-animazzjonijiet @keyframes jiddefinixxu sekwenza multi-pass li tista' taħdem awtomatikament, taħlaq, u tgħaddi minn ħafna stati intermedji.
slide-in {
{ : (-); : ; }
{ : (); : ; }
}
{
: slide-in ease-out;
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); } /* peak of the bounce */
100% { transform: translateY(0); }
}
Il-perċentaġġi jippermettulek tikkoregjogrfa ħafna stadji f'animazzjoni waħda — impossibbli b'transizzjoni sempliċi.
.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 */
Proprjetajiet oħra: animation-delay, animation-direction: alternate (ping-pong), animation-fill-mode: forwards (żomm l-istat finali), 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; } }
L-animazzjonijiet keyframe jaħdmu f'kull frame, għalhekk l-animazzjoni tal-proprjetajiet li jattizzaw il-layout hija ħafna aktar għaljija mill-animazzjoni ta' transform/opacity.
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; } /* honor users sensitive to motion */
}
L-animazzjonijiet keyframe jippotienzjalizzaw loaders, sinjali ta' attenzzjoni, entrati, u effetti ta' looping li t-transizzjonijiet ma jistgħux jesprimu (multi-pass, auto-running, infinit).
Il-għarfien tal-fuq, l-idheżjoni għal transform/opacity għaċ-ċewż tal-fluidità, u r-rispett għal prefers-reduced-motion jillowk ibnu moviment rik li jibqa' performanti u aċċessibli.