Noen ganger må vi lage animasjoner for endringer av elementer på en nettside med kontrollerende faktorer som hastighet, forsinkelsestid og varighet. I slike tilfeller kan transition-egenskapen benyttes for å oppnå dette.

Elementet har alltid to tilstander: initial og final. Vi kan kontrollere endringsatferden til elementet ved hjelp av følgende egenskaper:

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

• transition-property – Navnet på CSS-egenskapen som skal animeres;
• transition-duration – Tiden det tar å endre elementets tilstand. Angis i sekunder (s) eller millisekunder (ms);
• transition-timing-function – Angir hastighetskurven for overgangseffekten. Typiske verdier er ease, linear, ease-in, ease-out og ease-in-out;
• transition-delay – Tidsforsinkelsen før overgangseffekten starter. Angis i sekunder (s) eller millisekunder (ms).

Vi vil gjennomgå hver egenskap nærmere i dette kurset.

Merk

1 sekund = 1000 millisekunder. Så:

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

Øvelse

For eksempel ønsker vi å legge til en transition-effekt på bakgrunnsfargen til div-elementet når det holdes over med musen. Oppgaven vår er:

• Å endre background-color-egenskapen;
• Forsinkelsen skal være 0.1 sekunder;
• Endringen av fargen skal vare i 0.3 sekunder;
• For timing-function forventes verdien ease-in-out, som betyr at det starter sakte, går raskere i midten, og deretter sakte igjen mot slutten.

Hold musepekeren over elementet for å se resultatet.

Vi spesifiserte alle overgangsrelaterte egenskaper til div-elementet, og for hover satte vi kun dekorasjonen vi ønsket å vise.