Was ist der Unterschied zwischen CSS3 Übergänge ease-in
, ease-out
usw.?
css
css-transitions
user960567
quelle
quelle
Antworten:
Die Übergänge und Animationen von CSS3 unterstützen die Lockerung, die formal als "Timing-Funktion" bezeichnet wird. Die häufigsten sind
ease-in
,ease-out
,ease-in-out
,ease
, undlinear
, oder Sie können Ihre eigene Verwendung festlegencubic-bezier()
.ease-in
startet die Animation langsam und endet mit voller Geschwindigkeit.ease-out
startet die Animation mit voller Geschwindigkeit und endet dann langsam.ease-in-out
startet langsam, ist in der Mitte der Animation am schnellsten und endet dann langsam.ease
ist wieease-in-out
, außer dass es etwas schneller beginnt als es endet.linear
verwendet keine Lockerung.cubic-bezier
Syntax, die jedoch normalerweise nicht erforderlich ist, es sei denn, Sie möchten einige sehr genaue Effekte erzielen.Grundsätzlich bedeutet Lockern, langsam anzuhalten, Lockern langsam zu beschleunigen und linear beides nicht zu tun. Ausführlichere Ressourcen finden Sie in der Dokumentation
timing-function
zu MDN .Und wenn Sie die oben genannten präzisen Effekte wünschen, ist das erstaunliche Lea Verou's cubic-bezier.com für Sie da! Es ist auch nützlich, um die verschiedenen Timing-Funktionen grafisch zu vergleichen.
Eine andere, die
steps()
Timing-Funktion , verhält sich wielinear
, führt jedoch nur eine begrenzte Anzahl von Schritten zwischen dem Beginn und dem Ende des Übergangs aus.steps()
war für mich in CSS3-Animationen am nützlichsten und nicht in Übergängen. Ein gutes Beispiel ist das Laden von Indikatoren mit Punkten. Traditionell verwendet man eine Reihe statischer Bilder (z. B. acht Punkte, zwei wechselnde Farben pro Bild), um die Illusion von Bewegung zu erzeugen. Mit einersteps(8)
Animation und einerrotate
Transformation erzeugen Sie mithilfe von Bewegung die Illusion separater Frames! Wie viel Spaß.quelle