Heim > Artikel > Web-Frontend > 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(
cubic-bezier(
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
undend
, wodurch eine schrittweise Änderung am Start- oder Endpunkt angegeben wird Für jedes Intervall ist der Standardwertend
.
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
|
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+ |
In einigen Szenarien wird dies der Fall sein Falsches Verhalten
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!