Stel duur, vertraging en easing in met schuifregelaars, zie de cubic-bezier-curve getekend, vergelijk transitions met @keyframes en kopieer 20 hover-micro-interacties die rekening houden met reduced motion.
Een CSS-transition animeert een eigenschap vloeiend wanneer de waarde verandert, bijvoorbeeld bij hover: transition: transform 200ms ease-out. Er is een begin- en eindtoestand nodig en hij draait één keer per wijziging. @keyframes-animaties bepalen hun eigen stappen, kunnen herhalen en starten zonder dat er een toestand verandert. Animeer transform en opacity voor het vloeiendste resultaat.
transition, deel voor deel
De speeltuin animeert een echt element tussen twee toestanden met de eigenschap, duur, vertraging en easing die u kiest, en tekent de easing als curve zodat u ziet waarom ease-out vlot aanvoelt en ease-in traag. Verderop staan twintig hover- en focuseffecten die u live kunt bewerken en in elke site kunt plakken.
Een transition reageert op een gewijzigde waarde, zoals een class die wordt toegevoegd of een hover die begint, en gaat alleen van de oude naar de nieuwe waarde. Een animation gebruikt @keyframes, kan veel stappen hebben, kan herhalen of afwisselen, en draait zodra hij wordt toegepast. Gebruik transitions voor toestandswijzigingen en keyframes voor loaders en aandachtstrekkers.
Veelvoorkomende oorzaken: de eigenschap is niet animeerbaar (display was dat niet, tot allow-discrete), de beginwaarde is auto (height: auto kan zonder nieuwere functies niet worden geïnterpoleerd), het element is net ingevoegd zodat er geen vorige stijl is, of de transition staat alleen op de hover-toestand zodat hij bij mouse-out terugspringt.
transform en opacity kunnen meestal door de compositor worden afgehandeld zonder de layout opnieuw te berekenen of opnieuw te tekenen, dus ze blijven vloeiend. Width, height, top, left of margin animeren dwingt bij elk frame een layout af, en box-shadow of filter veroorzaken repaints, wat op tragere telefoons kan haperen.
Het beschrijft de easing-curve met twee controlepunten, cubic-bezier(x1, y1, x2, y2). De x-waarden zijn tijd en moeten tussen 0 en 1 blijven; de y-waarden zijn voortgang en mogen buiten dat bereik gaan, wat een overshoot of een kleine terugvering geeft.
Gebruik de media query @media (prefers-reduced-motion: reduce) om beweging in te korten of weg te halen. Een eenvoudige aanpak is kleur- en opacity-wijzigingen te behouden maar transforms te laten vallen, of transition-duration en animation-duration binnen die query op een heel kleine waarde te zetten.
Wanneer gebruikt u welke
Renderwerk per frame (algemene regel, verschilt per browser)
Behoudt toestandswijzigingen maar haalt de verplaatsing weg. Zet het tegen het einde van de stylesheet.
Een verbetering voor browsers die allow-discrete en @starting-style ondersteunen. Andere tonen en verbergen direct.
Hover of focus op elk resultaat om het te zien draaien. Elk fragment eindigt met een regel voor reduced motion.
Til een kaart op en maak de schaduw dieper.
Een kleine schaalvergroting bij hover en een indrukeffect bij klikken.
De lijn groeit van links via een background-size.
Achtergrond- en tekstkleur wisselen tegelijk.
Het icoon beweegt terwijl het label stil blijft.
Een plus wordt een kruis.
De outline-offset animeert voor toetsenbordgebruikers.
De afbeelding schaalt maar het kader snijdt haar af.
Het bijschrift schuift omhoog vanaf de onderrand.
Een gekleurde schaduw faadt in.
Een paar graden rotatie laat een sticker los aanvoelen.
De randkleur verandert van grijs naar het merkblauw.
Hoveren over één item laat de andere vervagen.
Een lichtband veegt bij hover voorbij.
Een checkbox gestyled als schakelaar met een schuivend knopje.
De markering draait wanneer een details-element opent.
Een herhalende statusstip gebouwd met @keyframes.
Lineaire timing houdt de rotatie gelijkmatig.
fill-mode both houdt het verborgen tijdens de vertraging.
Een korte horizontale schudbeweging die hier één keer afspeelt bij hover.
Easing-curve cubic-bezier({values})
Vooruit afspelen
Terug afspelen
Uw apparaat vraagt om minder beweging, dus de preview springt in plaats van te bewegen.
Eigenschap om te animeren
Duur: {n}ms
Vertraging: {n}ms
Easing-voorinstellingen
CSS kopiëren
Gratis beginnen · Geen creditcard nodig