Overgang-timing-functie - CSS-trucs

De transition-timing-functioneigenschap, die normaal gesproken wordt gebruikt als onderdeel van een transitionsteno, wordt gebruikt om een functie te definiëren die beschrijft hoe een overgang tijdens zijn duur zal verlopen, waardoor een overgang tijdens zijn verloop van snelheid kan veranderen.

.example ( transition-timing-function: ease-out; )

Deze timingfuncties worden gewoonlijk versnellingsfuncties genoemd en kunnen worden gedefinieerd met behulp van een vooraf gedefinieerde trefwoordwaarde, een stapfunctie of een kubieke Bézier-curve.

De toegestane vooraf gedefinieerde sleutelwoordwaarden zijn:

gemak
lineair
gemak in
gemak
gemak-in-uit
stap-start
step-end

Voor sommige waarden is het effect mogelijk niet zo duidelijk, tenzij de overgangsduur op een hogere waarde is ingesteld.

Elk van de vooraf gedefinieerde sleutelwoorden heeft een equivalente kubieke Bézier-curvewaarde of een equivalente stapfunctiewaarde. De volgende twee timingfunctiewaarden zijn bijvoorbeeld equivalent aan elkaar:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Net als de volgende twee:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Met behulp van steps () en Bézier-curven

Met deze steps()functie kunt u intervallen specificeren voor de timingfunctie. Er zijn een of twee parameters nodig, gescheiden door een komma: een positief geheel getal en een optionele waarde van startof end. Als er geen tweede parameter is opgenomen, wordt de standaardinstelling end.

Om de stepfuncties te begrijpen, is hier een demo die wordt gebruikt steps(4, start)voor de box aan de linkerkant en steps(4, end)voor de box aan de rechterkant (beweeg over een box of herlaad het frame om de overgangen te bekijken):

Kijk eens naar deze pen!

Wanneer startis gespecificeerd, vindt de verandering van waarden plaats aan het begin van elk interval, terwijl endde verandering van waarden plaatsvindt aan het einde van elk interval.

Een gedetailleerde kijk op de Bézier-curvewaarden valt buiten het bestek van deze referentie, maar zie de referenties in de sectie met gerelateerde links voor tools die visueel demonstreren hoe deze waarden werken.

Voor compatibiliteit in alle ondersteunende browsers zijn leveranciersvoorvoegsels vereist, waarbij de standaardsyntaxis als laatste wordt verklaard:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (de eerste stabiele versie van IE die wordt ondersteund transition-timing-function) vereist geen -ms-prefix.