Övergångar låter dig skapa smidiga animationer mellan stiländringar i CSS. Detta kan ge en bättre användarupplevelse och göra din webbplats mer tilltalande.
Viktiga begrepp:
- Transition-property: Anger vilken egenskap som ska animeras, t.ex. bakgrundsfärg eller opacitet.
- Transition-duration: Anger animationens varaktighet i sekunder.
- Transition-timing-function: Anger hur animationen ska ske, t.ex. linjär eller lätt in.
- Transition-delay: anger en fördröjning innan animationen startar.
Syntax:
element {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay;
}
Exempel:
p {
background-color: red;
transition: background-color 1s ease-in-out;
}
p:hover {
background-color: blue;
}
Detta skapar en smidig övergång från rött till blått när muspekaren hovrar över stycket.
Tips för att göra övergångar tillgängliga:
- Undvik att använda för snabba övergångar, eftersom det kan orsaka illamående.
- Övergångar med högre kontrast kan göra det lättare för användare med synnedsättning att uppfatta ändringar.
- Använd mediafrågor för att justera övergångarnas varaktighet och timing-funktioner för olika enheter och skärmstorlekar.