1. Heim
  2. CSS3 Übergang-Timing-Funktion Eigenschaft

Das beste CSS3 Übergang-Timing-Funktion Eigenschaft-Tutorial im Jahr 2024. In diesem Tutorial können Sie Beispiele,Browser-Unterstützung,Attributdefinitionen und Anweisungen,Grammatik,Weitere Beispiele,Beispiele,Beispiele, lernen

CSS3 Übergang-Timing-Funktion Eigenschaft

Beispiele

Transitions mit der gleichen Geschwindigkeit von Anfang bis Ende:

transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */

Versuchen »

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.

Unmittelbar im Anschluss an die digitale -webkit-, -MS- oder vor zur Unterstützung der Präfix Attributnummer erste Browser-Version -moz-.

属性
transition-timing-function 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-

Attributdefinitionen und Anweisungen

Übergang-Timing-Funktion Eigenschaft gibt einen Übergangseffekt Geschwindigkeit.

Diese Eigenschaft ermöglicht es einen Übergangseffekt die Geschwindigkeit seiner Dauer zu ändern.

Standard: Leichtigkeit
Vererbung: keine
Version: CSS3
JavaScript-Syntax: Objekt .style.transitionTimingFunction = "linear"

Grammatik

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

Wert Beschreibung
linear Rückstellungen mit der gleichen Geschwindigkeit die Übergangseffekt Enden (gleich kubisch-Bezier (0,0,1,1)) zu starten.
Leichtigkeit Bereitstellung langsamen Start, dann schneller, dann langsamer Übergang Effekte Ende (kubisch-Bezier (0.25,0.1,0.25,1)).
Einfachheit in Übergangsbestimmungen für die Wirkung einer langsamen Start (gleich der kubisch-Bezier (0.42,0,1,1)).
Leichtigkeit-out Rückstellungen bis zum Ende der langsamen Übergangseffekte (entspricht kubisch-Bezier (0,0,0.58,1)).
Leichtigkeit-in-out Übergangsbestimmungen in der Tat langsam beginnt und endet (gleich kubisch-Bezier (0.42,0,0.58,1)).
kubische Bezier (n, n,n, n) Sie definieren Ihre eigenen Werte in der kubisch-Bezier-Funktion. Möglicher Wert ist eine Zahl zwischen 0-1.

Tipp: Probieren Sie die verschiedenen Werte in denfolgenden Beispielen zu verstehen , wie es funktioniert!

Beispiele

Weitere Beispiele


Beispiele

Zum besseren Verständnis der Funktion der verschiedenen Werte verstehen: Es gibt fünf verschiedene div-Elemente, mit fünf unterschiedlichen Werten:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}

Versuchen »

Beispiele

Und das Beispiel oben, jedoch gibt die Geschwindigkeitskurve kubischen Bezier-Funktion:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Versuchen »

Hot Tutorials

Kontaktiere uns

CSS3 Übergang-Timing-Funktion Eigenschaft
10/30