CSS Animations

Transform

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

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

link

link

link

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

link

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

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';
});