Code

CSS3-overgangen gebruiken

Iedereen houdt van beweging. Het toevoegen van de vierde dimensie (tijd) aan een site-ontwerp is de belangrijkste manier waarop op schermen gebaseerd ontwerp zich onderscheidt van het ontwerp van de printer. CSS-overgangen zijn een eenvoudige methode voor het animeren van eigenschappen van een element waarmee u bepaalde gebeurtenissen in uw webontwerp kunt verrijken, zonder de behoefte aan Flash of JavaScript.

De W3C beschrijft treffend overgangen op hun website als "CSS-overgangen maken het mogelijk dat eigenschapsveranderingen in CSS-waarden soepel plaatsvinden gedurende een bepaalde duur". Met andere woorden, CSS-overgangen stellen ons in staat om een ​​eigenschap stapsgewijs te wijzigen, een bewegingssensatie te creëren en ontwerpen te subtileren met subtiliteit en emotie die niet mogelijk is met een snelle wijziging.

Browserondersteuning

Alle moderne browsers (ja zelfs IE!) Ondersteunen nu CSS-overgangen. Belangrijk is echter dat als overgangen niet worden ondersteund in de gebruikte browser, de overgang wordt genegeerd en de eigenschapwijzigingen direct worden toegepast. Deze sierlijke degradatie is een hoeksteen van de beste praktijken.

Om het bereik van browserondersteuning uit te breiden, kunnen we prefixen van leveranciers gebruiken, dit breidt de functie uit met Firefox 4-15, Opera 10.5-12 en de meeste versies van Chrome en Safari. De code, inclusief de leveranciersvoorvoegselalternatieven ziet er als volgt uit: 

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

De niet-vooringestelde eigenschap wordt aan de onderkant van de stapel toegevoegd om te zorgen dat de uiteindelijke implemantatie alle andere troef krijgt, omdat de eigenschap van concept naar voltooide status wordt verplaatst.

Overgangsparameters

Er zijn vier parameters voor CSS-overgangen:

  • transition-property: de eigenschap die moet worden getweend, of het trefwoord 'all' om op alle eigenschappen van toepassing te zijn;
  • overgangsduur: de duur van de overgang;
  • transitietiming-functie: de versoepeling die moet worden toegepast, dit zorgt voor een meer natuurlijk ogende beweging
  • transtion-delay: specificeert een vertraging tot het begin van de transitie.

Bovendien kunt u ook de eigenschap steno (zoals in het bovenstaande voorbeeld) gebruiken, waarbij de parameters worden opgegeven als eigenschap, duur, timingfunctie, vertraging.

Eigenschappen die kunnen worden overgezet

U kunt eigenschappen die kunnen worden vertaald naar een wiskundige waarde alleen overzetten. U kunt bijvoorbeeld de lettertypegrootte veranderen; je kunt font-face niet veranderen.

De volledige lijst met eigenschappen die momenteel kunnen worden overgezet, is als volgt:

achtergrond-positie, rand-onder-kleur, rand-onder-breedte, rand-links-kleur, rand-links-breedte, rand-rechts-kleur, rand-rechts-breedte, randafstand, rand-boven-kleur, border-top-width, bottom, clip, color, font-size, font-weight, height, left, letter-spacing, margin-bottom, margin-left, margin-right, margin-top, max-height, max- breedte, min-hoogte, min-breedte, dekking, omtrek-kleur, omtrek-breedte, opvulling-onderkant, opvulling-links, opvulling-rechts, opvulling-boven, rechts, tekst-inspringing, tekstschaduw, boven-, verticaal- align, width, word-spacing, z-index.

Overgangen gebruiken

Overgangsverklaringen worden gehecht aan de normale toestand van het element. Daarom slechts één keer voor meerdere staten verklaard, zoals: focus,: actieve en pseudo-klassen.

Met behulp van de volgende code kunnen we een basismenu en een alinea tekst opstellen. Het is zo gestyled dat de menu-items hun kleur en achtergrondkleur veranderen wanneer ze worden omgedraaid, en zodat de inlinekoppeling de onderstreepte kleur verandert van wit in groen wanneer de muisaanwijzer op de voorgrond staat: 

CSS transition demo
  • Business
  •   Code 
  •   Ontwerp 
  •   Inspiratie 
  •   Diversen 
  •   mobiel 
  •   Nieuws 
  •   Middelen 
  •   Usability 
  Integer posuere erat ante inline link   venenatis dapibus posuere velit aliquet.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Integer posuere erat ante venenatis dapibus posuere velit aliquet.  Nullam quis risus eget urna mollis ornare vel eu leo.

Zo ziet het eruit:

Gebruik je CSS3 Transitions? Welke effecten heb je kunnen creëren? Laat het ons weten in de comments.

Uitgelichte afbeelding / miniatuur, bewegend beeld via Shutterstock.

CSS-animatie css-code CSS3 overgangsvoorbeelden CSS3 overgangen css gebruiken voor animatie