CSS3 – Animation met ‘cubic-bezier’

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.

Dan zijn er nog een aantal animatie-eigenschappen die we nog niet behandeld hebben en die gaan we nu doen.

Allereerst de 'animation-timing-function'.

Je kunt kiezen uit een aantal standaard waarden als 'ease', ease-in' etcetera.

Om te begrijpen wat deze waarden doen. Is het handig te weten dat al deze waarden zijn opgebouwd met een bezier-curve

Ik kan dit het beste uitleggen en tonen op de website 'cubic-bezier.com'.

De basis van bezier curven zijn twee punten waartussen een rechte lijn getrokken is.

Dit is gelijk aan de waarde 'lineair'.

De opgegeven tijdsduur van de animatie bepaalt de lengte van de lijn in milliseconde of seconde.

Je kunt deze rechte lijn buigen tot een curve. Door aan het beginpunt aan de bezier-handle te trekken.

Bijvoorbeeld op deze manier. En je kan bij het eindpunt de bezier-handle ook weer terugzetten in het punt.

Zodra je met een bezier-handle, een gebogen lijn, onder of boven de curven trekt, dan creëer je hiermee,

een vertraging of een versnelling.

En ik vergelijk deze bezier-curve met de standaard linear.

Ik zet de timing op seconde en ik speel de animatie af.

Dus dit gebeurt er als je een bezier-curve maakt onder de lijn.

Hiermee vertraagt de animatie aan het begin.

Als ik juist het tegenovergesteld doe en ik trek een curve boven de lijn, dan is dit het resultaat.

Je hebt nu een versnelling gemaakt aan het begin.

Voor het bovenste punt geldt het omgekeerde.

Trek ik een curve aan het eindpunt boven de lijn.

Dan creëer ik aan het einde een vertraging.

Trek ik de curve onder de lijn. Dan maak ik aan het einde juist een versnelling.

Op deze webpagina kan ik mijn eigen bezier-curves tekenen.

Bovenin staan dan vervolgens de waarden die je voor cubic-bezier moet opgeven.

ik kan deze waarden Saven.

Dan krijg ik een venster in beeld waar ik de waarden kan kopiëren.

Commando of Control C via het toetsenbord.

Kan ik hier op zich ook 'annuleren' en dan laat ik zien hoe je dit toepast in je document.

Je gebruikt dan namelijk de waarde cubic-bezier.

En tussen de haakjes voer je dan vervolgens de getallen, waaruit de curve is opgebouwd, in.

Dus ik vervang de huidige 'animation-timing-function' die de standaard waarde 'ease-in' heeft gekregen voor 'cubic-bezier'.

Haakje openen en haakje sluiten. En tussen de haakjes kan ik met control of Commando V,

de waarden plakken die ik zojuist uit de website heb overgenomen.

En dat resulteert dan vervolgens in deze animatie.

Hij gaat langzaam van start en versnelt aan het eind.

Het leuke van cubic-bezier is dat je ook negatieve getallen kunt gebruiken.

Daarmee bereik je dan een soortement van bouncing-effect.

Dus als ik deze even zou willen vergelijken met een standaard lineaire animatie. Dan ziet het er als volgt uit.

Ook ditmaal kopieer ik deze getallen, met Commando of Control C.

En ik keer terug naar mijn voorbeeld document. Ik vervang deze waarden voor de nieuwe waarden.

En de taart die krijgt nu een kleine bounce, zowel aan het begin als aan het einde.