Hoe werkt de ‘animation’

uit de cursus Vormgeven met CSS

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 leer je hoe je met css kunt animeren.

Dezelfde css-eigenschappen waar je overgangen mee kunt maken met 'transition'.

Kun je ook gebruiken voor het maken van animaties.

Het grote voordeel van een animatie.

Is dat je net zoveel veranderingen op de tijdlijn kunt maken en beschrijven als je wilt.

Bij een 'transition' kun je maximaal een overgang tussen twee waarden creëren.

En bij een animatie dus veel meer.

Je maakt een animatie op basis van twee vereisten.

De animatie zelf beschrijf je in een speciale css-regel met de selector '@keyframe'.

Hieraan verbind je een unieke naam. In deze selector beschrijf je dan de gehele animatie.

Je kunt meerdere eigenschappen animeren en per eigenschap kun je meerdere veranderingen opgeven in de tijdlijn.

Vervolgens pas je de beschreven animatie toe op een html-element.

Door de unieke naam die je voor de animatie hebt opgegeven.

In de selector aan het element te verbinden met de css-eigenschap

'Animation'.

En vervolgens de unieke naam van de animatie in te voeren.

Hier geef je dan ook de animatie-eigenschappen op als 'duration'

Timing-function, delay

Itteration-count

en direction, deze leg ik later in deze video uit.

Ik begin met het uitleggen en het maken van de animatie.

Hiervoor biedt css meerdere manieren en mogelijkheden.

Allereerst heb je de eigenschappen 'from' en 'to'.

Bij 'from' beschrijf je alle begin-eigenschappen en bij 'to' alle eind-eigenschappen.

Deze lijkt dus qua uitvoering nog het meest op 'transition'.

Ik doe het voor in een voorbeeld document.