Eine beispielhafte Einführung in die Animation-Timing-Funktion in CSS3

animation-timging-function wird hauptsächlich verwendet, um die Geschwindigkeit der CSS-Animation von Anfang bis Ende zu steuern.

• linear: linearer Übergang. Entspricht der Bezier-Kurve (0,0, 0,0, 1,0, 1,0)

• Einfachheit: sanfter Übergang. Entspricht der Bezier-Kurve (0,25, 0,1, 0,25, 1,0)

• Einstieg: von langsam nach schnell. Entspricht der Bezier-Kurve (0,42, 0, 1,0, 1,0)

• Ease-out: von schnell nach langsam. Entspricht der Bezier-Kurve (0, 0, 0,58, 1,0)

• ease-in-out: von langsam nach schnell und dann nach langsam. Entspricht der Bezier-Kurve (0,42, 0, 0,58, 1,0)

• Schrittstart: Entspricht Schritten(1, Start)

• Schrittende: Entspricht Schritte(1, Ende)

• Schritte([, [ start | end ] ]?): Eine Schrittfunktion, die zwei Parameter akzeptiert. Der erste Parameter muss eine positive ganze Zahl sein, die die Anzahl der Schritte der Funktion angibt. Der Wert des zweiten Parameters kann start oder end sein und gibt den Zeitpunkt an, zu dem sich der Wert jedes Schritts ändert. Der zweite Parameter ist optional und der Standardwert ist end.

• cubic-bezier(, , , ): Spezifischer Bezier-Kurventyp, 4 Der Wert muss sein im Intervall [0, 1] liegen

Hier stellen wir hauptsächlich Schritte()

.heart{background-image: url('images/heart-sprite.png');-webkit-animation: animate 1s steps(28) infinite;animation: animate 1s steps(28) infinite;
}@keyframes animate {
  from {background-position: 0 0;}
  to {background-position: -2800px 0;}}

Stellen Sie den Intervallparameter ein, um einen schrittweisen Übergang zu erreichen steps()

Der erste Parameter gibt die Anzahl der Intervalle in der Zeitfunktion an (muss eine positive Ganzzahl sein)

Der zweite Parameter ist optional und akzeptiert zwei Werte:
start und end, wodurch eine schrittweise Änderung am Start- oder Endpunkt angegeben wird Für jedes Intervall ist der Standardwert end.

• Hellgrün = Unterstützt

• Rot = Nicht unterstützt

• Rosa = Teilweise unterstützt

Werte

IE

Firefox

Chrome

Safari

Opera

iOS Safari

Android Browser

Android Chrome

Grundlegender Support

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-9.0	2.0-4.0	4.0-42.0-webkit-	6.0-8.0-webkit-	15.0-29.0-webkit-	6.0-8.4-webkit-	2.1-3.0-webkit-#1	18.0-42.0-webkit-
	10.0+	5.0-15.0-moz-	43.0+	9.0+	30.0+	9.0+	4.0-40.0-webkit-
		16.0+

6.0-9.0

2.0-4.0

4.0 -42.0^-webkit-

6.0-8.0^-webkit-

15.0-29.0^-webkit-

6.0-8.4 ^-webkit-

2.1-3.0^-webkit-#1

18.0-42.0^-webkit-

10.0+

5.0-15.0^-moz-

43,0+

9,0+

30,0+

9.0+

4.0-40.0^-webkit- td>

16.0+

1. In einigen Szenarien wird dies der Fall sein Falsches Verhalten

2. Einige Browser unterstützen keine Pseudoelement-Animation oder die Unterstützung ist nicht gut genug. Versuchen Sie, Pseudoelemente nicht für Animationen zu verwenden

Das obige ist der detaillierte Inhalt vonEine beispielhafte Einführung in die Animation-Timing-Funktion in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!