CSS3 – Animation met ‘iteration-count’ & ‘direction’

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

Volgende video: CSS - Prefixes schrijven

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.

Na de 'animation-timing-function' volgt de 'animation-iteration-count'.

Hiermee bepaal je het aantal keren dat de animatie moet worden afgespeeld.

Deze staat nu op . Standaard is de waarde .

Dus als je niets invult voor de 'iteration-count' dan wordt de animatie maar keer afgespeeld.

Je kunt de animatie ook loopen, dan voer je hier 'infinite' in.

Ik doe het voor in het voorbeeld document.

En als ik nu een voorbeeld ga bekijken in de browser, dan wordt deze loopend afgespeeld.

Na de 'animation-timing-function' volgt de animation-direction'.

Hiermee bepaal je de wijze waarop de animatie moet worden afgespeeld. Standaard staat deze op 'normal'.

Dat betekent dus dat deze telkens van begin- tot eind wordt afgespeeld.

Aan het einde springt hij weer naar het begin en begint van voren af aan.

'Reverse' is het omgekeerde. Deze start telkens aan het einde.

En speelt de animatie af naar het begin.

'Alternate' betekent dat hij telkens van begin naar eind en dan weer terug naar het begin wordt geanimeerd.

En 'alternate-reverse' betekent dat deze begint aan het einde.

Een animatie maakt naar het begin. En daarna weer terug naar het eind.

De afbeelding wordt wel altijd eerst geladen op de startpositie.

Zoals deze is bepaald bij de @keyframes.

Pas als de afbeelding is geladen, dan gelden de animatie-waarden die je opgeeft.

Zoals bij 'animation-direction'. Ik doe het voor in het voorbeeld document.

Ik zet de 'animation-iteration-count' op .

En daarna volgt de 'animation-direction'. Ik plaats deze eerst op 'reverse'.

Zodra ik een voorbeeld bekijk in de browser.

Dan wordt deze nu van achteren naar voren afgespeeld.

En aan het einde stopt hij weer op de startpositie.

Ik kan ook kiezen voor 'alternate-reverse'.

De afbeelding begint op zijn startpositie. En daarna speelt hij van achteren naar voren en weer terug.

Als ik alleen kies voor 'alternate' en ik combineer dit dan vervolgens met oneindig.

Dan maak ik niet alleen maar een animatie die zich oneindig herhaald.

Maar ook de hele tijd, van voor naar achter, van achter naar voren zich afspeelt.

In dit voorbeeld heb ik nu de shorthand-notation gebruikt.

Maar je had alle waarden ook apart kunnen beschrijven. En dat had er dan zo uitgezien.

Ik heb nu ook een 'delay' ingesteld van seconde.

Dus daarom wachtte de animatie even een heel kort moment.

Sommigen geven de voorkeur voor deze aparte benamingen, omdat het je iets meer overzicht biedt.

En in dit geval is ook de volgorde niet belangrijk. En die moet je wel goed hebben bij de shorthand-notation.

Stel dat ik deze animatie ook zou willen toepassen op de h.

Dan is het het makkelijkst om de selector van de class="cake".

Met een komma uit te breiden ook voor de h.

En als ik vervolgens mijn document bewaar en een voorbeeld bekijk in de browser.

Dan wordt deze animatie ook op de tekst toegepast.

Je kunt animaties toepassen op bijna elke html-element.

Maar ik kan natuurlijk voor de teksten ook weer een geheel eigen animatie bedenken.

Maar ik kan natuurlijk voor de teksten ook weer een geheel eigen animatie bedenken.