ease-out, in; ease-in, out

Wir kamen auf das Thema Easing (Verzögerung) in einer aktuellen Folge von ShopTalk mit Val Head und Sarah Drasner zu sprechen. Easing ist wichtig, wenn es um Animationen und Übergänge geht. In Kombination mit der Dauer hat es einen enormen Einfluss auf das *Gefühl* einer Veränderung. Wenn Sie Animationen ernsthaft *als Teil der Marke* eines Projekts betrachten, sollten Sie Easings definieren und konsistent verwenden.

Das gesagt, es ist ein Gleichgewicht zwischen

• Erstellen/Verwenden von Easings, die zu Ihrer Marke passen
• Einhaltung von "weichen" Regeln darüber, welche Art von Easings wann angemessen sind

Betrachten wir eine bestimmte Best Practice, so wie ich sie verstehe. Aber zuerst eine weitere Beobachtung.

Die Standard-transition-timing-function in CSS (das Easing) ist ease.

.thing {

  /* The default, as in, you get this without defining anything */
  transition-timing-function: ease;

  /* Also the same as */
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  
}

Es ist ein ziemlich gutes! Ich bin schuldig, es kaum jemals zu ändern. Ich stelle die Dauer ein und optimiere sie und lasse sie im Allgemeinen bei ease. *Zu gut*, vielleicht? Ich frage mich, ob wir proaktiver wären, gut passende Easings zu wählen, wenn CSS standardmäßig auf das langweiligere/leblose linear Easing zurückgreifen würde. Obwohl linear sehr nützlich sein kann, habe ich festgestellt, wenn die Änderung sehr gering ist, wie nur wenige Pixel Bewegung oder eine Farbänderung.

Die ease Timing-Funktion ist vielleicht so gut, weil sie eine Variante von ease-in-out ist. Das heißt, die Veränderung geschieht sowohl am Anfang als auch am Ende langsam und beschleunigt sich nur irgendwo in der Mitte. Dies verleiht der Veränderung (metaphorisch) weiche Kanten und fühlt sich im Allgemeinen gut an.

Es gibt zwei weitere eingebaute CSS-Timing-Funktionen

• ease-in: langsam am Anfang, schnell/abrupt am Ende
• ease-out: schnell/abrupt am Anfang, langsam am Ende

Während sie in dieser Betrachtungsweise einen gewissen intuitiven Sinn ergeben, lautet die allgemeine "Regel" (in Anführungszeichen), sie *entgegengesetzt* zu dem zu verwenden, wie sie benannt sind

• ease-in: wenn sich Dinge *heraus* bewegen.
• ease-out: wenn sich Dinge *hinein* bewegen.

Denken Sie an einen Knappen eines Ritters. Wenn der Ritter ihn ruft, sollte er besser im Laufschritt ankommen und langsam zum Stehen kommen. Wenn der Ritter ihn wegschickt, sollte er sich besser sehr schnell davon machen.

Das fühlt sich wie eine Best Practice an. Als ob die Animation auf beiden Seiten höflich und gehorsam wäre. Kommen Sie eilig her, aber fassen Sie sich. Machen Sie sich noch schneller und ohne Verzögerung davon.

Hier ist das CSS, das zu dieser Art von Denken passt. Dies ändert die Easing-Funktion je nachdem, ob das betreffende Element angezeigt oder ausgeblendet wird, sowie die Dauer.

.container .alert {

  /* This timing applies on the way OUT */
  transition-timing-function: ease-in;

  /* Quick on the way out */
  transition: 0.2s;

  /* Hide thing by pushing it outside by default */
  transform: translateY(130%);

}

.container.alert-is-shown .alert {

  /* This timing applies on the way IN */
  transition-timing-function: ease-out;

  /* A litttttle slower on the way in */
  transition: 0.25s;
  
  /* Move into place */
  transform: translateY(0);

}

Siehe den Pen Different eases for “in” and “out” von Chris Coyier (@chriscoyier) auf CodePen.

Ich habe diese CSS-basierte Demo basierend auf den klugen Dingen zusammengestellt, über die Val und Sarah gesprochen haben, sowie auf dem kürzlich gesehenen Design-Spezifikation von Google für genau diese Bewegung.

Die Animationsdauern, die wir hier verwenden, gehören ebenfalls ins "Regel"-Gebiet, wie Val generell beschrieben hat: 0,1–0,2 s für einfache Benutzeroberflächenbewegungen und bis zu 0,5 s für komplexere oder größere Bewegungen.

Zusammenfassend

• ease ist ziemlich gut, aber Sie möchten vielleicht einige Easings anpassen, die sich für Ihre Marke richtig anfühlen
• ease und ease-in-out haben an beiden Enden weiche Kanten, aber manchmal ist es angemessener, ease-in oder ease-out zu verwenden
• Sie müssen nicht ein einzelnes Easing für beide Richtungen einer Animation verwenden, Sie können es wechseln
• Sie können auch die Dauer ändern

Außerdem finden Sie hier eine praktische Referenz für die Standardwerte und ihre entsprechenden cubic-bezier-Werte, falls Sie mit einem davon beginnen und von dort aus anpassen möchten

.examples {

  transition-timing-function: linear;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);

  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  transition-timing-function: ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

  transition-timing-function: ease-in;
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

  transition-timing-function: ease-out;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

}