CSS3 – Keyframe Animations, procenten 0%-100%

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

In deze video behandelen we de 'keyframe' animaties.

In plaats dat je werkt met de eigenschappen 'from' en 'to'.

Kun je ook de percentages op de tijdlijn animeren.

Als de animatie seconde duurt, betekent % dus dat deze plaats vindt op de seconde.

Duurt de animatie maar seconde, dan is dit dus op de halve seconde.

Afhankelijk van de 'animation-duration' kun je op bepaalde momenten heel exact een animatie starten en eindigen.

Od een overgang in een animatie creëren.

Zodra je de positie van een element wilt animeren.

Moet je deze positie ook bekend maken in de css-stijl.

Met de waarde 'relative' wordt de huidige positie in het document als startpositie genomen.

De ruimte die het element oorspronkelijk inneemt, blijft behouden.

In het hoofdstuk 'Positioneren met CSS-eigenschap 'position'.

Kun je alle eigenschappen voor het positioneren leren.

In de index.html die behoort bij deze video staat een div met de class="container".

Deze heeft in de css-stijl een breedte van pixels.

Staat gecentreerd met 'margin: auto'.

En die heb ik een border meegegeven zodat je straks kunt zien, wat er gebeurt met deze div,

als de inhoud van de container vergroot wordt met een animatie.

Binnen deze div staat een afbeelding met de class="cake".

En deze staat met een css-stijl ook gecentreerd met een 'margin: auto'.

Maar omdat een afbeelding standaard een inline-block-element is.

Moet je deze eerst ook omzetten naar een block-element.

Voordat je deze kunt centreren met 'margin'.

De staat voor de afstand naar boven en naar beneden.

En 'auto' zorgt ervoor dat de ruimte links en rechts automatisch verdeeld wordt.

Dit is een voorbeeld van deze pagina in een browser.

Ik begin met het schrijven van een animatie voor de h.

En ik gebruik hiervoor dus de css-stijlregel '@keyframes'.

En ik geef deze de unieke naam 'change' op.

En in plaats van een 'from' en een 'to', gebruik ik dit keer de percentages op de tijdlijn.

En ik begin met %, de startpositie.

En dan wil ik dat de 'font-size' gelijk is aan de huidige 'font-size' en die staat op '.em'.

Maar dat deze dan vervolgens bij de % gaat groeien.

En wel naar een 'font-size:.em'.

Zodra de animatie op de % is.

Wil ik dat de font-size weer terugkeert naar de oorspronkelijke size en die was dus .em.

Ik heb dus nu keyframes aangemaakt.

Vervolgens kan ik ook bepalen dat ik op de %, als kleur 'color',

wil beginnen met dezelfde startkleur is 'brown'.

De % sla ik volledig over en ik ga direct door naar de %.

En daar wil ik dat de 'color' op 'orange' staat.

Ook al maak je meerdere keyframes aan en ga je meerdere eigenschappen animeren.

Dat wil niet zeggen, dat je ook elke eigenschap, op elke keyframe moet benoemen.

In dit geval heb ik voor de 'font-size' wel de keyframes benut.

Maar ik gebruik alleen de eerste keyframe, %.

En de laatste keyframe, op %, om de kleur te animeren van bruin naar oranje.

Om de animatie te verbinden aan de h.

Breid ik de css-stijlregel hiervan uit met de 'animation' eigenschappen.

Ik schrijf deze voor de duidelijkheid even apart uit.

Maar je kunt hier natuurlijk ook de shorthand-notation voor gebruiken.

Allereerst geef ik de 'animation-name' op.

En deze heet 'change'. Dan de 'animation-duration'.

En ik wil dat de animatie seconde duurt.

Vervolgens bepaal ik het gedrag van de animatie met de 'animation-timing-duration'.

En deze zet ik op 'ease-in-out'.

En als laatste zorg ik met 'animation-iteration-count'.

Dat de animatie zich standaard keer afspeelt.

Dan is dit het eindresultaat in de browser.

Zoals je ziet groeit de container zodra de tekst niet meer past binnen de opgegeven breedte.

Deze groeit dus met de inhoud mee.

Stel dat er tekst, afbeeldingen of andere elementen onder deze div zouden staan.

Dan worden deze dus door de groeiende div weggeduwd.

Ik schrijf nogmaals een animatie. Ik plaats deze boven de @keyframes met de naam 'change'.

En dit wordt een '@keyframes bounce'. Ditmaal weer met de techniek 'from' naar 'to'.

Ik begin met een 'opacity' op %.

Ik ga de positie animeren. Ik start met top - en eindig met top .

En left - als start en left pixels als einde.

Daarnaast wordt er ook een transform-opdracht gegeven van begin,

rotate - gradennaar einde + graden.

En van de helft schalen naar uiteindelijk het formaat zoals deze oorspronkelijk is.

Ik ga deze animatie toepassen op de afbeelding. Omdat we de positie gaan animeren.

Moet ik sowieso de positie bekend gaan maken, met een 'position' en ik kies 'relative.

De 'animation-name' is 'bounce'. Ik wil dat de animatie seconde duurt.

En als 'animation-timing-function' heb ik een 'cubic-bezier' curve gebruikt.

Met een kleine bounce erin. ik wil dat deze zich oneindig vaak afspeelt.

Door de 'animation-iteration-count: infinte'.

En de 'animation-direction' is 'alternate'. Oftewel, hij speelt zichzelf af van begin naar eind.

En daarna van eind naar begin weer terug. Dan is dit het eindresultaat hiervan in de browser.

Nadat de h keer heeft afgespeeld, blijft deze zich juist oneindig vaak herhalen.

Opvallend wat je nu ziet, is dat de box niet mee groeit.

Terwijl de afbeelding wel buiten de box groeit.

En dat komt omdat we de positie hebben geanimeerd.

Daarbij blijft alleen de originele positie van de afbeelding behouden en binnen de div staan.

En de afbeelding zelf is als het ware, als een laag, zwevend gekomen.

Deze staat ook in de stapelvolgorde nu boven de h.

En je ziet dus duidelijk dat deze de grenzen van de box kan overschrijden.

Stel dat ik de kop h, groter zou willen kunnen maken.

En dat deze net als de afbeelding buiten de div-grenzen zou kunnen komen.

Dus zonder dat de div ook mee gaat groeien en andere elementen op de pagina gaat wegduwen.

Dan moet ik geen gebruik maken van de 'font-size', want hiermee vergroot ik de corpsgrootte.

En tekst moet altijd getoond worden binnen een html-element.

Wat ik dan wel had kunnen doen, is gebruik maken van de transform-eigenschap.

Dus ik verander de 'font-size' naar een 'transform' en dan kies ikvoor 'scale'.

En dan staat tussen haakjes, de schaling, staat voor het originele formaat.

Dus ik kan deze vervolgens kopiëren en ook bij einde plakken. Het originele formaat is die .em.

En bij de % plaats ik de 'transform:scale', bijvoorbeeld op .

Als ik nu een voorbeeld bekijk in de browser, dan wordt de tekst vergroot.

En kan net als de afbeelding buiten de begrenzing komen van de div.

Het voordeel hiervan is dus dat andere elementen op de pagina nu niet meer weggeduwd worden.