CSS Animaties

Dus, je bent in web development en/of webdesign gedoken. Je hebt al wat gave trucjes geleerd en weet dat je met jQuery en andere JavaScript libraries coole dingen op het scherm van je bezoekers kan toveren. Ook met CSS kun je allerlei animaties maken, hier volgt een stap-voor-stap gids om dat voor elkaar te krijgen. Pas op voor een animatie- overkill. Animaties moet je content ondersteunen, niet domineren.

CSS animaties worden opgebouwd met twee bouwstenen:

Bouwsteen Nr. 1: Keyframes

Keyframes vormen de fundering van CSS Animaties. Deze definiëren hoe de animatie eruit komt te zien tijdens elke stap van animatie-tijdlijn. Elke @keyframes wordt opgebouwd uit:

Laten we eens kijken naar een simpele bounceIn animatie die we definiëren met @keyframes. De animatie bestaat uit drie stappen. Bij stap 1 (0%) is de is de opacity van het element 0 en het formaat geschaald naar 10% van de werkelijke grootte. Het schalen doen we met behulp van transform: scale(0.1). Bij stap twee (60%) verschijnt het element naar volledige opacity en groeit deze naar 120% van zijn werkerlijke grootte. Bij de laatste stap (100%), schaalt het element terug naar zijn werkelijke grootte. Veel woorden, maar hieronder is het effect te zien.

De @keyframes plak je in je CSS file

@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}

( het combineren van van CSS Transforms zorgt voor de magie van CSS Animaties )

Bouwsteen Nr. 2: Animatie Eigenschappen

Wanneer je de @keyframes gedefinieerd hebt, moet je de animatie eigenschappen op volgorde toevoegen om je animatie te laten draaien.

Animatie Eigenschappen doen twee dingen:

De animatie eigenschappen worden toegevoegd aan CSS selectors (de elementen) die je wilt animeren. Je moet de volgende animatie eigenschappen toevoegen om de animatie te laten draaien:

Voortbordurend op bovenstaande bounceIn animatie voegen we animation-duration en animation-name toe aan de eigenschappen van het element waar we de animatie op toe willen passen.

div { animation-duration: 2s; animation-name: bounceIn; }

Of gebruik de verkorte syntax:

div { animation: bounceIn 2s; }

Door het toevoegen van zowel @keyframes als de animatie eigenschappen krijgen we een eenvoudige animatie

CSS animatie bounceIn

bron

Aanmelden bij CodeGorilla: 22 augustus 2017

Wordt het tijd voor jou om je carrière een boost te geven? Flauw van je huidige uitzichtloze baan? Of zie je nu al aankomen dat het werk wat je nu doet in de nabije toekomst geautomatiseerd gaat worden? Lees dan even verder, ik zal uit de doeken doen hoe ik mijn leven heb omgegooid en zodoende fantastische toekomstperspectieven heb gekregen.

Je hoort weleens van die verhalen, mensen die hun schaapjes op het droge hebben en heel hard roepen dat je vooral moet doen wat je leuk vindt en dat het geld vanzelf wel volgt. Mijn ervaring is dat dit deels waar is, maar de realiteit is voor het leeuwendeel van de bevolking nu eenmaal anders. Ga eens na hoeveel mensen in jouw vrienden- kennissen- en familiekring eigenlijk alleen maar werken voor het geld. Kun je ze dat kwalijk nemen? Ik niet, er moet nu eenmaal brood op de plank komen en voor velen betekent dat gewoon doen wat nodig is, je dagen slijten op een kantoor, in een fabriekshal of in een vrachtwagen om de hypotheek, huur, nutsvoorzieningen, verzekeringen en/of wekelijkse boodschappen te kunnen betalen. En dan lees je wat op internet, zie je wat op tv of hoor je op de radio hoe mensen gewoon doen wat ze leuk vinden en er nog geld mee verdienen ook. Dat is voor lang niet iedereen weggelegd en dat zal ook nooit voor iedereen weggelegd zijn. Maar dat betekent niet dat je zelf helemaal niets in de hand hebt. Een sprong in het diepe is wel nodig, maar het is dichterbij dan je in eerste instantie wellicht denkt. Tenminste, als je web development ziet zitten, dat wel. Hoe dan? CodeGorilla! Een web development bootcamp in Emmen en zeer binnenkort ook Groningen waar je in 3 maanden kunt leren programmeren. In 3 maanden leren programmeren! Dus dan leer je in één seizoen een vaardigheid die veel gevraagd is, zoek voor de gein eens naar vacatures, en toekomstproof is. De wereld verandert snel, de IT-wereld al helemaal. Bij CodeGorilla leer je vooral leren en de skills die de markt vraagt. Dat betekent niet simpelweg programmeertalen in je hoofd stampen. Dat betekent vooral de vaardigheid aanleren om snel talen te doorgronden en de logica aan te leren, zodat je de snelle veranderingen ook kunt bijbenen.
Voorkennis en dergelijke
Voorkennis, vooropleiding of kennisniveau zijn niet van belang, met een dosis logisch denkvermogen heb je al genoeg in huis om in aanmerking te komen voor de bootcamp van CodeGorilla. Ik kan je uit ervaring vertellen dat je jezelf zul verbazen, 4 maanden geleden was elke regel code abracadabra voor me, nu lees ik er zo overheen en begrijp ik wat het doet (of zou moeten doen). Ik heb geen vooropleiding, voorkennis of "tech-knobbel". Maar ik rammel nu wel websites en apps uit mijn MacBook alsof ik nooit anders gedaan heb. Dat kun jij ook, geloof me. Aanmelden? mail CodeGorilla en we ontmoeten elkaar snel in Emmen of Groningen.