Samen met de introductie van CSS3 komen er veel nieuwe functies die beschikbaar zijn voor gebruik bij het creëren van geweldige effecten; een van de meest bruikbare is de overgangseigenschap .
De overgangseigenschap is een belangrijke nieuwe ontwikkeling in CSS. Het kan worden gebruikt om een dynamisch veranderingseffect op een div of klasse te maken met behulp van een eenvoudige structuur:
transition: property duration timing-function delay;CSS3's overgang is een geweldige manier om een kleine animatie toe te voegen aan sites zonder de grote overhead van een JavaScript-bibliotheek zoals jQuery.
Voordat we beginnen, kun je hier een demo van zien de overgangseigenschap in actie .
Ten eerste moet de standaardeigenschap waarop deze wordt toegepast, worden gedefinieerd voordat de overgangseigenschap werkt. Waarschijnlijk zijn de twee meest voorkomende eigenschappen die worden gedefinieerd, de breedte en hoogte. Om de eigenschap zelfstandig te gebruiken, gebruikt u eenvoudigweg:
transition-property: define propertyAls de eigenschap eenmaal is gedefinieerd, moeten de begin- en eindwaarden worden toegewezen. In het geval van waarden zoals breedte of hoogte moet de eigenschap worden ingesteld met een beginwaarde en vervolgens een eindwaarde met een andere voorwaarde.
Hier stellen we bijvoorbeeld de overgangseigenschap in op de breedte, dan de startwaarde van de breedte en stel vervolgens de eindwaarde in wanneer het element zweeft over:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Nu we de te transformeren eigenschap, de begin- en eindwaarden, hebben gedefinieerd, moeten we de duur van de overgang definiëren. Dit wordt bereikt door een lengte in seconden of milliseconden te definiëren, zoals hieronder:
transition-duration: duration;Als dit in het voorbeeld wordt opgebouwd, wordt de volgende code gemaakt:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Dit betekent dat de divider van de mainheader met 25 px zal groeien over een duur van 5 seconden.
De code is voldoende om een leuk effect te creëren, maar we kunnen de CSS3-overgangseigenschap verder gebruiken door de timing-functie te gebruiken. Met behulp van deze eigenschap is het mogelijk om de snelheidscurve van de overgangsduur te wijzigen. De overgangseigenschap is standaard ingesteld op een lineaire curve. U kunt echter gemak, gemak, gemak, uitputting en zelfs kubieke bezier definiëren om de snelheidscurve te wijzigen. Met Cubic-bezier kunt u uw eigen waarden definiëren met behulp van (n, n, n, n) waarbij n tussen 0 en 1 kan liggen (bijvoorbeeld lineair zou zijn (0,0,1,1)).
Door in deze code toe te voegen aan onze voorbeeldresultaten:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Verder, net als transitie-duur, definieert het gebruik van de overgangsvertragingseigenschap een pauze voordat het overgangseffect begint:
transition-delay: time;Ten slotte is het belangrijk om twee dingen te overwegen bij het gebruik van de CSS3-overgangseigenschap. Ten eerste vereisen de meeste browsers die momenteel in omloop zijn een browser-voorvoegsel om het te gebruiken (met uitzondering van IE10, Opera en Firefox16 +):
-moz-overgang: voor Firefox 15
-webkit-overgang: voor Chrome en Safari
(Houd er rekening mee dat IE9 en lager de overgangseigenschap helemaal niet ondersteunen.)
Ten tweede, hoewel ik de bovenstaande voorbeelden met de hand heb gebruikt voor de duidelijkheid, wordt het als de beste praktijk beschouwd om in de volgende vorm te schrijven:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Gebruik de overgangseigenschap van CSS3? Hoe is het te vergelijken met jQuery-gebaseerde tweens? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, bewegend beeld via Shutterstock.