CSS3 – Animation met ‘position’ & ‘scale’

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.

Stel dat ik de positie van de animatie ook nog wil gaan animeren.

Dan breid ik deze animatie uit met de volgende css-eigenschappen.

Ik wil bijvoorbeeld als top-positie aan het begin, dat deze staat op pixels.

En dat hij van links, 'left', ook begint aan de linkerkant met pixels.

Maar dat deze vervolgens aan het einde, 'top'.

Staat op pixels naar beneden en 'left' pixels naar rechts wordt verplaatst.

Zodra je de positie van een element gaat animeren.

Moet de positie van het element wel bekend zijn. Als ik nu bekijk naar een voorbeeld.

Dan zie ik dat wel de 'opacity' en de 'transform' wordt toegepast maar niet de positie bepaling.

Daarvoor moet ik nog een css-regel beschrijven voor de class="cake".

Namelijk 'position' en deze zet ik op 'relative'.

Dit houdt in dat hij zijn huidige positie in de natural flow als startpositie aanneemt.

Als ik nu een voorbeeld bekijk in de browser, dan wordt ook inderdaad de positie geanimeerd.

Stel dat ik wil dat de afbeelding, de helft verkleind, start.

Dan kan ik bij de 'from' eigenschappen in mijn animatie, de transform-eigenschap uitbreiden met 'scale'.

En tussen de haakjes plaats ik dan de schaling.

staat voor het huidige formaat en alles hieronder is een verkleining, dus . is voor de helft kleiner.

En dan schaal ik deze bij de eigenschap 'to' weer terug naar % En dat is scale .

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