Nogle gange skal vi oprette animationer for elementændringer på en webside med kontrollerende faktorer såsom hastighed, forsinkelsestid og varighed. I sådanne tilfælde kan transition-egenskaben anvendes til at udføre denne opgave.

Elementet har altid to tilstande: initial og slut. Vi kan kontrollere elementets ændringsadfærd ved hjælp af følgende egenskaber:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 

• transition-property – Navnet på den CSS-egenskab, der skal animeres;
• transition-duration – Tidsrummet, hvor elementets tilstand skal ændres. Angives i sekunder (s) eller millisekunder (ms);
• transition-timing-function – Angiver hastighedskurven for transitionseffekten. Typiske værdier er ease, linear, ease-in, ease-out og ease-in-out;
• transition-delay – Tidsforsinkelsen før transitionseffekten starter. Angives i sekunder (s) eller millisekunder (ms).

Vi vil gennemgå hver egenskab nærmere senere i dette kursus.

Bemærk

1 sekund = 1000 millisekunder. Så:

• 0.1s = 100ms;
• 2.5s = 2500ms;
• 0.5s = 500ms.

Øvelse

For eksempel ønsker vi at tilføje en transition-effekt til baggrundsfarven på div-elementet, når det bliver holdt over med musen. Opgaven er:

• At ændre background-color-egenskaben;
• Forsinkelsen skal være 0.1 sekunder;
• Farveændringen skal vare 0.3 sekunder;
• For timing-function forventes værdien ease-in-out, hvilket betyder, at det starter langsomt, accelererer i midten og igen bliver langsomt til sidst.

Hold markøren over elementet for at se resultatet.

Vi specificerede alle overgangsrelaterede egenskaber til div-elementet, og for hover angav vi kun den dekoration, vi ønskede at se.