CSS Animations

Transform

Met de transform property kunnen we elementen visueel aanpassen zonder hun positie in de DOM te wijzigen.

Elementen verplaatsen, schalen & roteren
Beïnvloedt de andere elementen niet

.box {
  transform: scale(1.2); /* Vergroot het element met 20% */
}

Transform values

translateX(): verplaatsen op de x-as
translateY(): verplaatsen op de y-as
scaleX(): horizontaal schalen
scaleY(): verticaal schalen
rotate(): rond het middelpunt draaien
skew(): schuintrekken
...

Transform

Transition

Laten het toe om elementen geleidelijk aan te animeren tussen 2 states.

Transition

= shorthand property die volgende properties kan combineren:

transition-property
transition-timing-function
transition-duration
transition-delay
transition-behavior

p {
	transition: color 300ms ease-in; 
}

Transition

p {
	transition-property: color;
	transition-duration: 300ms;
	transition-timing-function: ease-in; 
}

p {
	transition: color 300ms ease-in; 
}

is hetzelfde als:

Dit:

Voorbeeld

link

0.2 seconden

a {
  background-color: green;
  transition: background-color 0.2s;
}

a:hover {
  background-color: blue;
}

:hover is een pseudo class die je kan gebruiken om de styling aan te passen wanneer je over een element beweegt met je cursor

Voorbeeld

link

0.2 seconden

a {
  transition: transform 0.2s;
}

a:hover {
  transform: scale(1.1);
}

link

Je kan dit dus ook combineren met de transform property:

Transition restricties

🖱️ Kan alleen starten bij een gebruikersactie (zoals hover of klik)
🔁 Het werkt alleen tussen twee states (van A naar B en eventueel terug)
🤯 Voor complexe animaties is het niet flexibel genoeg

🪄 Oplossing: @keyframes {}

CSS Animation

@keyframes {}

Met @keyframes {} kan je op specifieke punten in de tijd properties aanpassen:

@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

Keyframes gebruiken

Stap 1: Keyframes aanmaken

Start met @keyframes
Kies een unieke naam gevolgd door accolades {}
Elke keyframe heeft een
- Procentuele waarde in de tijd % gevolgd door accolades {}
- 1 of meerdere properties

@keyframes zotteDoos {
  0% { transform: translateX(0); }
  50% { transform: translateX(10rem) rotate(45deg); }
  100% { transform: translateX(0); }
}

Keyframes gebruiken

Stap 2: Keyframes toekennen aan een element

Gebruik de property animation
Geef de animation-name mee (= naam van @keyframes)
Geef de animation-duration mee
Geef extra optionele properties mee
- Overzicht op MDN

.box {
  animation: zotteDoos 2s infinite;
}

Keyframes gebruiken

@keyframes zotteDoos {
  0% { transform: translateX(0); }
  50% { transform: translateX(10rem) rotate(45deg); }
  100% { transform: translateX(0); }
}

.box {
  animation: zotteDoos 2s infinite;
}

JavaScript animaties

Met JavaScript kunnen we animaties dynamisch aansturen, pauzeren of interactief maken:

door een class te togglen

const box = document.querySelector('.box');

box.classList.add("wobble");
box.classList.toggle("random-color");
box.classList.remove("hidden");

JavaScript animaties

Met JavaScript kunnen we animaties dynamisch aansturen, pauzeren of interactief maken:

door een class te togglen
of via het inline style="" attribute

const box = document.querySelector('.box');

box.addEventListener('click', () => {
  box.style.animation = 'moveBox 2s infinite';
});

4. CSS animations

4. CSS animations

Lecturer GDM PRO

4. CSS animations

More from Lecturer GDM