Perėjimas sklandžiai animuoja ypatybę iš jos senesnės reikšmės į naują per tam tikrą laiką, vietoj to, kad ją keistų akimirksniu. Jūs deklaruojate ką animuoti ir kiek ilgo laiko, tada tai suaktyvinate keisdami ypatybę (dažnai per :hover arba klasę).
{
: 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 */
}
Išvardykite kiekvieną ypatybę (atskirtą kableliais), o ne naudokite all, kuris gali atsitiktinai animuoti dalykus, kuriuos neketinate, ir pabloginti našumą.
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;
Pageidaujamai animuokite transform ir opacity; juos tvarko sudėtinis elementas neperkraunant maketo, todėl jie lieka sklandūs (60fps).
@media (prefers-reduced-motion: reduce) {
* { transition: none; } /* respect users who get motion sickness */
}
Perėjimai suteikia blizgesį, dėl kurio naudotojo sąsaja atrodo atsakinga ir gyva (hover efektai, sklandūs būsenos pasikeitimai) su tik viena eilute.
Žinoti, kad reikia animuoti transform/opacity dėl našumo — ir gerbti prefers-reduced-motion — tai yra tai, kas atskiria sklandžią, pasiekiamą judėjimą nuo neryškios animacijos.