En övergång animerar smidigt en egenskap från sitt gamla värde till ett nytt under en tidsperiod, istället för att ändra det direkt. Du deklarerar vad som ska animeras och hur länge, och utlöser det sedan genom att ändra egenskapen (ofta via :hover eller en klass).
{
: 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 */
}
Lista varje egenskap (kommaseparerad) istället för att använda all, som kan oavsiktligt animera saker du inte avsåg och skada prestandan.
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;
Föredra animering av transform och opacity; de hanteras av kompositorn utan att köra layout på nytt, så de förblir smidiga (60 fps).
@media (prefers-reduced-motion: reduce) {
* { transition: none; } /* respect users who get motion sickness */
}
Övergångar lägger till den glans som gör användargränssnittet känsligt och levande (hover-effekter, smidiga tillståndsändringar) med bara en rad.
Att veta att man ska animera transform/opacity för prestanda — och respektera prefers-reduced-motion — är det som skiljer smidig, tillgänglig rörelse från hackig animation.