CSS3 – Transition-timing-function & -delay

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 animatie zit aan het begin een lichte vertraging, dan versnelt hij.

En hij vertraagt ook weer een beetje aan het einde.

Dit is de default waarde voor de transition 'timing-function'.

Deze staat namelijk standaard op 'Ease'.

En dat is dus 'licht vertragen' aan het begin en aan het eind.

Je kunt kiezen uit meerdere waarden en die laat ik even zien.

Met de waarde linear is er geen enkele vertraging, niet aan het begin en niet aan het eind.

En deze wordt dan dus in een constant tempo afgespeeld.

Met 'ease-in' vertraag je alleen aan het begin. Met 'ease-out' alleen aan het einde.

En met 'ease-in-out' zowel aan het begin als aan het einde.

De waarde 'cubic-bezier' die behandelen we nu niet.

Maar de anderen die gaan we even bekijken in ons voorbeeld document.

De css-eigenschap die je hiervoor dus gebruikt is dus de 'transition-timing-function'.

En vervolgens kies ik bijvoorbeeld nu eerst voor 'linear'. Om deze zonder vertraging en versnelling te laten afspelen.

En ik kijk even naar de 'ease-out'.

Dan wordt deze wel direct gestart maar aan het einde vindt een vertraging plaats.

Uiteindelijk is het natuurlijk een kwestie van voorkeur

Welke instelling je het liefste wil gaan gebruiken voor je animatie.

En dan bekijken we nog hoe je een vertraging voor de hele animatie kunt opgeven.

En dat doe je met een 'transition-delay'.

En ik voer in dat deze vertraging voordat de animatie gaat starten, seconde moet duren.

Als ik nu op het element beweeg, dan wordt er wel direct de tekstkleur verandert.

Maar het duurt seconde voordat de animatie zich afspeelt.

Dit is een kleine overzichtlijst van alle css-eigenschappen die je kunt opnemen in een animatie.

Zo heb je bijvoorbeeld de box-eigenschappen margin, padding of lineheight, color, en opactity.

En ook voor fonts zijn diverse animatie mogelijkheden wat betreft font-weight,

stretch, size, letter-spacing etcetera.

Je kunt achtergrondafbeeldingen en -kleuren kun je animeren. Je kunt dit ook doen met de border.

Het positioneren kun je animeren en we hebben zojuist het transformeren behandeld.