Ibland behöver vi skapa animationer för elementförändringar på en webbsida med kontrollerande faktorer såsom hastighet, fördröjningstid och varaktighet. I sådana fall kan egenskapen transition användas för att uppnå detta.

Elementet har alltid två tillstånd: initialt och slutligt. Vi kan styra elementets förändringsbeteende med hjälp av följande egenskaper:

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

• transition-property – Namnet på den CSS-egenskap som ska animeras;
• transition-duration – Tidsperioden under vilken elementets tillstånd ska ändras. Anges i sekunder (s) eller millisekunder (ms);
• transition-timing-function – Anger hastighetskurvan för transitionseffekten. Typiska värden är ease, linear, ease-in, ease-out och ease-in-out;
• transition-delay – Tidsfördröjning innan transitionseffekten startar. Anges i sekunder (s) eller millisekunder (ms).

Vi kommer att behandla varje egenskap vidare i denna kurs.

Obs

1 sekund = 1000 millisekunder. Så:

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

Praktik

Till exempel, vi vill lägga till en transition-effekt på bakgrundsfärgen för div-elementet när det hovras över. Uppgiften är:

• Att ändra egenskapen background-color;
• Fördröjningen ska vara 0.1 sekunder;
• Färgändringen ska pågå i 0.3 sekunder;
• För timing-function förväntas värdet ease-in-out, vilket innebär att det börjar långsamt, ökar hastigheten i mitten och saktar ner igen i slutet.

Hovra över elementet med hjälp av markören för att se resultatet.

Vi angav alla övergångsrelaterade egenskaper till div-elementet och för hover ställde vi endast in den dekoration vi vill se.