Lättnadsfunktioner

Lättningsfunktioner anger förändringshastigheten för en parameter över tid.

Objekt i verkliga livet startar och stannar inte bara direkt, och nästan aldrig rör sig med en konstant hastighet. När vi öppnar en låda flyttar vi först den snabbt, och sen sakta ner den när den kommer ut. Släpp något på golvet och det kommer först accelerera nedåt och studsar sedan upp igen efter att ha träffat golvet.

Den här sidan hjälper dig att välja rätt lättnadsfunktion.

Öppen källkod

Hjälp till att översätta webbplatsen till ditt språk

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

Alla lättnader

CSS

I CSS låter övergångs- och animeringsegenskaperna dig att ange en lättnadsfunktion.

.block {
	transition: transform 0.6s ;
}

Redigera på cubic-bezier.com.

I CSS kan den här funktionen implementeras med @keyframes:

Storlek

Laddar...

Position

Laddar...

Genomskinlighet

Laddar...

PostCSS

I PostCSS är lättnadsfunktionen mycket lättare att beskriva. Det finns ett plugin postcss-easings som tar övergångsinformationen från den platsen.

.block {
	transition: transform 0.6s ;
}

Deklarationen konverteras till den som beskrivs ovan.

Tyvärr kan lättnadsfunktionen inte ställas in med något PostCSS-plugin. Kan göras med @keyframes, se ovan.

Gradient

Det är möjligt att rita en gradient med postcss-easing-gradients.

.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}

Matematisk funktion

Nedan ser du koden för denna lättnadsfunktion skriven i TypeScript. Variabeln x representerar animeringens absoluta progressionen inom gränserna 0 (animeringens början) och 1 (animeringens slut).

function (x: number): number {

}

Nedan ser du koden för denna lättnadsfunktion skriven i TypeScript. Variabeln x representerar animeringens absoluta progressionen inom gränserna 0 (animeringens början) och 1 (animeringens slut).

function (x: number): number {

}

Kontrollera lättnad för ändringar:

Denna funktion:

Denna funktion

Linjär funktion:

Linjär funktion