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:

  1. Eigenschap (Property): De CSS-eigenschap die je wilt animeren (bijvoorbeeld width, height, background-color, etc.).
  2. Duur (Duration): De tijd die de overgang duurt (bijvoorbeeld 0.5s voor een halve seconde).
  3. Tijdfunctie (Timing Function): De snelheidscurve van de overgang (bijvoorbeeld ease, linear, ease-in, ease-out, etc.).
  4. 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.

Meer over CSS Transitions vind je bij de W3 School.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.