CSS transitions zijn een manier om visuele effecten toe te voegen aan veranderingen in CSS-eigenschappen zonder dat je JavaScript hoeft te gebruiken. Transitions zorgen ervoor dat de overgang tussen de oude en nieuwe waarde van een eigenschap soepel verloopt over een bepaalde tijdsduur.
Dit kan worden gebruikt om visuele feedback te geven op gebruikersacties, zoals hover- of klikgebeurtenissen, waardoor de gebruikerservaring dynamischer en aantrekkelijker wordt.
CSS transitions uitgelegd
CSS transitions werken door de verandering van een CSS-eigenschap over een bepaalde tijd te animeren. Ze bestaan uit vier belangrijke onderdelen:
- Eigenschap (Property): De CSS-eigenschap die je wilt animeren (bijvoorbeeld width, height, background-color, etc.).
- Duur (Duration): De tijd die de overgang duurt (bijvoorbeeld 0.5s voor een halve seconde).
- Tijdfunctie (Timing Function): De snelheidscurve van de overgang (bijvoorbeeld ease, linear, ease-in, ease-out, etc.).
- Vertraging (Delay): De tijd voordat de overgang begint (optioneel, bijvoorbeeld 1s voor één seconde vertraging).
Voorbeeld CSS transition
Laten we een voorbeeld nemen waarbij we de achtergrondkleur van een knop veranderen als je eroverheen zweeft (hover).
De HTML code
De CSS code
.my-button { background-color: blue; color: white; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.5s ease; } .my-button:hover { background-color: green; }
Uitleg van de CSS
- background-color: De eigenschap die we willen animeren.
- 0.5s: De duur van de overgang is een halve seconde.
- ease: De snelheidscurve, wat betekent dat de overgang begint en eindigt langzaam, maar in het midden sneller gaat.
- Wanneer je nu met je muis over de knop beweegt, verandert de achtergrondkleur soepel van blauw naar groen over een halve seconde.