CSS-animaties: transform, transition en keyframes

Met CSS-animaties maak je een website levendiger en aantrekkelijker. Denk aan een knop die subtiel beweegt, een afbeelding die draait of een vakje dat geleidelijk verschijnt. In dit hoofdstuk leer je hoe je met alleen CSS de volgende technieken gebruikt:

  1. transform – elementen verplaatsen, draaien of schalen
  2. transition – veranderingen in eigenschappen vloeiend laten verlopen
  3. @keyframes-animaties – complexere animaties met meerdere tussenstappen, automatisch afspelend

Wat doet transform?

Met transform verander je alleen de visuele weergave van een element. Het element blijft op dezelfde plek in de pagina-indeling; alleen hoe het eruitziet verschuift, draait of schaalt.

A. Verschuiven (translate)

  • translateX(waarde)
    • translateX(20px) → schuift 20px naar rechts
    • translateX(-20px) → schuift 20px naar links
  • translateY(waarde)
    • translateY(15px) → schuift 15px naar beneden
    • translateY(-10px) → schuift 10px omhoog

B. Draaien (rotate)

  • rotate(hoek)
    • rotate(45deg) → draait 45° met de klok mee
    • rotate(-30deg) → draait 30° tegen de klok in

C. Schalen (scale)

  • scale(factor)
    • scale(1.2) → vergroot het element tot 120%
    • scale(0.8) → verkleint het element tot 80%

D. Combineren

Meerdere bewerkingen kun je achter elkaar zetten, zonder komma’s:

/* Schuift 10px omlaag, draait 30° en vergroot 10% */
transform: translateY(10px) rotate(30deg) scale(1.1);
Waarom transform gebruiken?
Je kunt een element bewegen of draaien zonder dat andere elementen in je layout beïnvloed worden. Vooral handig voor knoppen, afbeeldingen of icoontjes die je subtiel wilt animeren.

Wat doet transition?

Zónder transition veranderen eigenschappen direct. Met transition geef je aan dat een verandering in een opgegeven eigenschap geleidelijk moet verlopen over een bepaalde tijd en met een gekozen snelheidscurve.

A. Syntax van transition

selector {
  transition: [eigenschap] [duur] [timing-function] [vertraging];
}
/* Bijvoorbeeld:
   transition: transform 0.5s ease, opacity 0.5s ease;
*/
  • [eigenschap]: bijvoorbeeld transform, opacity, background-color
  • [duur]: hoelang de overgang duurt, b.v. 0.5s, 1s, 300ms
  • [timing-function] (hoe de snelheid verloopt):
    • linear (constante snelheid)
    • ease (langzaam→snel→langzaam)
    • ease-in (langzaam→snel)
    • ease-out (snel→langzaam)
    • ease-in-out (langzaam→snel→langzaam)
  • [vertraging] (optioneel, b.v. 0.2s om even pauze te hebben voor de start)

B. Voorbeeld

.box {
  /* Begin: 20px lager en onzichtbaar */
  transform: translateY(20px);
  opacity: 0;

  /* Vloeiende overgang voor transform en opacity in 0.5s met ease */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Bij hover schuift box omhoog en wordt zichtbaar in 0.5s */
.container:hover .box {
  transform: translateY(0);  /* terug naar normale positie */
  opacity: 1;                /* volledig zichtbaar */
}
Tip: Zonder transition-duration (bv. 0.5s) zou de verandering direct (hard) gebeuren.

Voorbeeld 1: Een vakje dat verschijnt bij hover

Maak twee aparte bestanden: index.html en style.css.

1. HTML (index.html)

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animatie bij hover</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="voorbeeld-hover">
    <h2>Vakje verschijnt bij hover</h2>
    <div class="container">
      <!-- Vakje dat in eerste instantie verborgen is -->
      <div class="box"></div>
      <p>Beweeg je muis over deze kader om de box omhoog te laten komen.</p>
    </div>
  </section>
</body>
</html>

2. CSS (style.css)

/* Container met stippellijn om duidelijk te maken waar je moet hoveren */
.container {
  border: 2px dashed #888;
  padding: 16px;
  display: inline-block;
  margin-bottom: 16px;
}

/* Blauwe box die in eerste instantie onzichtbaar en 20px lager staat */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;

  /* Beginstatus */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Bij hover op .container: box in 0.5s omhoog schuiven en zichtbaar maken */
.container:hover .box {
  transform: translateY(0);
  opacity: 1;
}

Uitleg:
1. .box begint 20px lager (translateY(20px)) en is onzichtbaar (opacity: 0).
2. Als je met je muis over .container gaat, krijgt .box translateY(0) en opacity: 1.
3. Dankzij transition: transform 0.5s ease, opacity 0.5s ease verloopt dat in 0,5s vloeiend.

Voorbeeld 2: Een vakje tonen/verbergen met een checkbox (zonder JavaScript)

Met de checkbox-hack gebruik je een verborgen <input type="checkbox"> en een <label> om heel eenvoudig een klik‐functionaliteit in CSS te maken.

1. HTML

<section class="voorbeeld-checkbox">
  <h2>Klik om vakje te tonen/verbergen</h2>

  <!-- Label werkt als knop (via for="toggle") -->
  <label for="toggle" class="btn-toggle">Toon/Verberg vakje</label>

  <!-- Onzichtbare checkbox -->
  <input type="checkbox" id="toggle">

  <!-- Het vakje dat we willen tonen of verbergen -->
  <div class="box2"></div>

  <p>Klik op de knop hierboven om zonder JavaScript de blauwe box te laten verschijnen of verdwijnen.</p>
</section>

2. CSS

/* Verberg de checkbox zelf, we zien alleen de label */
#toggle {
  display: none;
}

/* Beginstatus: box2 staat 20px lager en is onzichtbaar */
.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Als de checkbox is aangevinkt: box2 naar normale positie en zichtbaar */
#toggle:checked + .box2 {
  transform: translateY(0);
  opacity: 1;
}

/* Label als knop */
.btn-toggle {
  display: inline-block;
  padding: 8px 12px;
  background-color: #2c3e50;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 8px;
  text-align: center;
}

.btn-toggle:hover {
  background-color: #34495e;
}

Uitleg:
1. De <input id="toggle"> is onzichtbaar (display: none).
2. .box2 begint 20px lager (translateY(20px)) en onzichtbaar (opacity: 0).
3. De selector #toggle:checked + .box2 pakt de box die direct ná de checkbox staat. Bij “checked” verandert de box naar translateY(0) en opacity: 1.
4. De <label for="toggle"> werkt als klikbare knop; elke klik schakelt de checkbox om.

Wat doet @keyframes-animatie?

Met @keyframes kun je een animatie in meerdere stappen definiëren, waarna je die met animation automatisch laat afspelen. Handig voor animaties die niet afhangen van hover of click, maar direct bij het laden van de pagina starten, of die voortdurend herhaald moeten worden.

A. Definieer de keyframes

@keyframes slideRotateFadeIn {
  /* Begin: 20px lager, 45° tegen de klok in, onzichtbaar */
  0% {
    transform: translateY(20px) rotate(-45deg);
    opacity: 0;
  }
  /* Halverwege: 10px lager, 20° draai, halfdoorzichtig */
  50% {
    transform: translateY(10px) rotate(-20deg);
    opacity: 0.5;
  }
  /* Eind: normale positie, rechtop, volledig zichtbaar */
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

B. Koppel de animatie aan een element

.box3 {
  width: 100px;
  height: 100px;
  background-color: blue;

  /* 1s animatie, ease-timing, behoud eindtoestand */
  animation: slideRotateFadeIn 1s ease forwards;

  /* Extra schaduw voor diepte */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
Extra opties
• vertraging: voeg 0.3s toe na ease om pas na 0,3s te starten:
animation: slideRotateFadeIn 1s ease 0.3s forwards;
• herhaling: vervang forwards door infinite om eeuwig te herhalen:
animation: slideRotateFadeIn 1s ease infinite;
• Je kunt meerdere animaties achter elkaar zetten, gescheiden door komma’s.

Voorbeeld 3: Automatische animatie met @keyframes

Maak twee bestanden: index.html en style.css.

1. HTML

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Automatische animatie</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="voorbeeld-animatie">
    <h2>Automatische animatie met keyframes</h2>
    <div class="box3"></div>
    <p>Deze box schuift omhoog, draait en wordt zichtbaar zodra de pagina opent.</p>
  </section>
</body>
</html>

2. CSS

/* 1. Definieer keyframes met drie stappen */
@keyframes slideRotateFadeIn {
  0% {
    transform: translateY(20px) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: translateY(10px) rotate(-20deg);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

/* 2. Pas animatie toe op .box3 */
.box3 {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slideRotateFadeIn 1s ease forwards;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

Uitleg:
• Bij 0% start de box 20px lager en 45° tegen de klok in geroteerd, met opacity: 0.
• Bij 50% is hij half omhoog en halfdoorzichtig, draai 20°.
• Bij 100% staat hij rechtop op de oorspronkelijke plek en is volledig zichtbaar.
• De animation-regel zorgt ervoor dat deze stappen in 1s automatisch worden uitgevoerd.

Wanneer gebruik je welk onderdeel?

  • Eenvoudig hover-effect (kleur of kleine verplaatsing)
    Gebruik alleen transition met :hover.
    Voorbeeld: knop van grijs naar groen laten kleuren in 0,3s.
  • Grotere beweging of draai bij hover
    Combineer transform en transition.
    Voorbeeld: icoon dat bij hover 45° draait én 10px omhoog schuift in 0,4s.
  • Click-effect zonder JavaScript
    Gebruik de checkbox-hack (:checked) in combinatie met transform en transition.
    Voorbeeld: vakje dat bij aanklikken verschijnt en schuift.
  • Automatische of herhaalde animaties
    Gebruik @keyframes met animation.
    Voorbeeld: logo dat continu roteert (infinite), of element dat bij laden van de pagina in beeld schuift.
  • Meerdere tussenstappen nodig
    Gebruik @keyframes voor complexe sequenties (0%, 25%, 50%, 75%, 100%).
    Voorbeeld: vlag die heen en weer zwaait en van kleur verandert.

Kort overzicht

Techniek Wat doet het? Gebruik voor…
transform Verschuift, roteert of schaalt een element Visuele effecten waarbij animatie-element beweegt/draait zonder layout te breken
transition Laat verandering in CSS-eigenschappen geleidelijk verlopen Hover- en click-effecten waarbij kleur, positie of doorzichtigheid geanimeerd wordt
@keyframes Definieert meerdere tussenstappen voor een animatie Automatische of herhaalde animaties met meerdere fases (bijv. draaien + verschuiven)

Samenvatting

  • transform: verplaats (translateX, translateY), draai (rotate) en schaal (scale) een element visueel.
  • transition: maak een verandering in een CSS-eigenschap vloeiend over een opgegeven tijd met een gekozen snelheidscurve.
  • @keyframes: definieer stap voor stap hoe een element verandert in de loop van de animatie, en start die automatisch met de animation-eigenschap.

Met deze drie CSS-technieken kun je van simpele hover-effecten tot complexe, automatische animaties bouwen—alles zonder JavaScript. In de oefeningen van dit hoofdstuk ga je hands-on aan de slag met hover, checkbox-tricks, transities, transform-bewegingen en keyframe-animaties. Succes!