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.
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.
Er zijn vier parameters voor CSS-overgangen:
Bovendien kunt u ook de eigenschap steno (zoals in het bovenstaande voorbeeld) gebruiken, waarbij de parameters worden opgegeven als eigenschap, duur, timingfunctie, vertraging.
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.
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 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:
En hier is het resultaat: