Mpito inaeneza kwa uangavu sifa kutoka kwa thamani yake ya zamani hadi mpya kwa wakati, badala ya kuibadilisha mara moja. Unasema nini cha kuzenezesha na muda gani, kisha ukaibadilisha kwa kubadilisha sifa (mara nyingi kupitia :hover au darasa).
{
: blue;
: background ease;
}
{
: darkblue;
}
transition: background 0.3s ease 0s;
/* │ │ │ └── delay before starting */
/* │ │ └─────── timing function (the easing curve) */
/* │ └──────────── duration */
/* └─────────────────────── property to animate (or `all`) */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px); /* lifts up */
box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + deeper shadow */
}
Orodhesha kila sifa (iliyotenganishwa na koma) badala ya kutumia all, ambayo inaweza kuzenezesha vitu ambavyo haukumaanisha na kudhuru utendaji.
transition-timing-function: ease; /* slow-fast-slow (default) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* custom curve */
/* ✅ cheap — GPU-composited, no layout recalculation */
transition: transform 0.3s, opacity 0.3s;
/* ❌ expensive — animating width/top/left triggers layout on every frame */
transition: width 0.3s, left 0.3s;
Pendelea kueneza transform na opacity; zinasimamiwa na kiunganishi bila kueneza kubuni, kwa hivyo zinabaki laini (60 fps).
@media (prefers-reduced-motion: reduce) {
* { transition: none; } /* respect users who get motion sickness */
}
Mipito inaongeza mng'ao unaofanya kiolesura kihisi kinzira na kuzimira (athari za hover, mabadiliko laini ya hali) na mstari mmoja tu.
Kujua kueneza transform/opacity kwa utendaji — na kuheshimu prefers-reduced-motion — ndilo linalotenganisha harakati laini, yenye ufikiaji mula kwa enezaji ya machafuko.