Heim  >  Artikel  >  Web-Frontend  >  Eine beispielhafte Einführung in die Animation-Timing-Funktion in CSS3

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

零下一度
零下一度Original
2017-06-27 10:15:381780Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn