Unterschied zwischen dem Easy-In und dem Easy-Out von CSS3-Übergängen

Was ist der Unterschied zwischen CSS3 Übergänge ease-in, ease-outusw.?

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, und linear, oder Sie können Ihre eigene Verwendung festlegen cubic-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.
• easeist wie ease-in-out, außer dass es etwas schneller beginnt als es endet.
• linear verwendet keine Lockerung.
• Schließlich finden Sie hier eine gute Beschreibung der cubic-bezierSyntax, 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-functionzu 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 wie linear, 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 einer steps(8)Animation und einer rotateTransformation erzeugen Sie mithilfe von Bewegung die Illusion separater Frames! Wie viel Spaß.