Animatie - rvdegroen/notes GitHub Wiki

Inhoud

Over deze pagina

Deze pagina is alles wat we hebben besproken tijdens de animation workshop, gegeven door Sanne.

Animation keyframes

Om te animeren in CSS heb je keyframes nodig. Je kan meerdere keyframes toevoegen. Een voorbeeld hiervan is als volgt:


@keyframes kleur {
    0% {
        background-color: red;
    }

    100% {
        background-color: blue;
    }
}

Animation properties

Voor een CSS animation heb je verschillende properties:

  • animation-name
  • animation-delay
  • animation-duration
  • animation-play-state
  • animation-direction
  • animation-iteration-count
  • animation-timing-function

Animatie voorbeeld: veranderen van kleur

Om aan te duiden hoe een animatie er in CSS uit ziet, met keyframes en animation properties, heb ik een kleine voorbeeld gemaakt (door Sanne eigenlijk):


/* CSS */

animation-name: kleur
animation-duration:2s;
animation-iteration-count:infinite; (repeating)
animation-direction: alternate; (gaat ie niet gelijk naar rood of blauw)
animation-play=state:paused; (gepauzeerd tijdelijk)

div:hover {
    animation-play-state: running

}

@keyframes kleur {
    0% {
        background-color: red;
    }

    100% {
        background-color: blue;
    }
}

Animation chaining

Chaining houdt in dat de ene animatie na de andere animatie komt. De onderstaande animatie is een voorbeeld van chaining (animatie door Sanne):

<!-- html -->

<div>
	<div></div>
	<div></div>
</div>

/* css */

body {
	height:100vh;
	display:grid;
	place-content:center;
}


/********************/
/* de buitenste div */
/********************/
body > div {
	position:relative;
	width:5em;
	aspect-ratio:1;

	background-color:green;

	animation-name:omhoog;
	animation-duration:1s;
	animation-play-state:paused;
	/* na afloop van de animatie blijft de animatie staan op keyframe 100% */
	animation-fill-mode:forwards;
}

@keyframes omhoog {
	0% {
		transform:translateY(0);
	}
	100% {
		transform:translateY(-200%);
	}
}


/******************/
/* binnenste divs */
/******************/
div div {
	position:absolute;
	inset:0;

	background-color:red;

	/* gelijk voor beide divs */
	animation-duration:1s;
	/* de delay is gelijk aan de duration van de animatie van de buitenste div */
	animation-delay:1s;
	animation-play-state:paused;
	animation-fill-mode:forwards;
}

div div:nth-of-type(1) {
	animation-name:links;
}

div div:nth-of-type(2) {
	animation-name:rechts;
}

@keyframes links {
	0% {
		transform:translateX(0%);
	}
	100% {
		transform:translateX(-200%);
	}
}

@keyframes rechts {
	0% {
		transform:translateX(0%);
	}
	100% {
		transform:translateX(200%);
	}
}


/***********************************/
/* dit geldt voor alledrie de divs */
/***********************************/
body:hover div {
	animation-play-state:running;
}

Take-aways

  1. Transform kan je niet 2x op een element gebruiken
  2. Om te weten hoe een pad werkt: https://mavo.io/demos/svgpath/ (path segments)
  3. Om te weten hoe animation curves lopen op een visuele manier: matthewlein.com/tools/ceasar
  4. Met nesten van divjes kan je beter een wrapper eromheen doen voor meer controle > wrapper kan je omhoog animeren

Reflectie

Ik heb nooit met CSS iets genanimeerd met keyframes, dus dit gaf mij duidelijk inzicht hoe je elementen kan animeren. Ik vond dit eigenlijk best cool, ook al lukte het niet helemaal.

⚠️ **GitHub.com Fallback** ⚠️