Animation - CSS-Tricks

Anonim

Die animationEigenschaft in CSS kann zu animieren vielen anderen CSS - Eigenschaften verwendet werden , wie color, background-color, heightoder width. Jede Animation muss mit der @keyframesat-Regel definiert werden, die dann mit der animationEigenschaft aufgerufen wird , wie folgt :

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

Jede @keyframesAt-Regel definiert, was zu bestimmten Zeitpunkten während der Animation geschehen soll. Zum Beispiel ist 0% der Anfang der Animation und 100% das Ende. Diese Keyframes können dann entweder über die Shorthand- animationEigenschaft oder ihre acht Untereigenschaften gesteuert werden , um mehr Kontrolle darüber zu erhalten, wie diese Keyframes bearbeitet werden sollen.

Untereigenschaften

  • animation-name: deklariert den Namen der @keyframeszu manipulierenden at-Regel.
  • animation-duration: Die Zeit, die eine Animation benötigt, um einen Zyklus abzuschließen.
  • animation-timing-function: legt voreingestellte Beschleunigungskurven wie easeoder fest linear.
  • animation-delay: Die Zeit zwischen dem Laden des Elements und dem Start der Animationssequenz (coole Beispiele).
  • animation-direction: Legt die Richtung der Animation nach dem Zyklus fest. Die Standardeinstellung wird bei jedem Zyklus zurückgesetzt.
  • animation-iteration-count: Die Häufigkeit, mit der die Animation ausgeführt werden soll.
  • animation-fill-mode: Legt fest, welche Werte vor / nach der Animation angewendet werden.
    Sie können beispielsweise festlegen, dass der letzte Status der Animation auf dem Bildschirm verbleibt, oder Sie können festlegen, dass zu Beginn der Animation zurückgeschaltet wird.
  • animation-play-state: Animation anhalten / abspielen.

Diese Untereigenschaften können dann wie folgt verwendet werden:

@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )

Hier ist eine vollständige Liste der Werte, die jede dieser Untereigenschaften annehmen kann:

animation-timing-function Leichtigkeit, Leichtigkeit, Leichtigkeit, Leichtigkeit, Linear, kubischer Bezier (x1, y1, x2, y2) (z. B. kubischer Bezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs oder Xms
animation-delay Xs oder Xms
animation-iteration-count X.
animation-fill-mode vorwärts, rückwärts, beide, keine
animation-direction normal, alternativ
animation-play-state pausierte, rannte, rannte

Mehrere Schritte

Wenn eine Animation dieselben Start- und Endeigenschaften hat, ist es hilfreich, die Werte 0% und 100% durch Kommas zu trennen @keyframes:

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

Mehrere Animationen

Sie können die Werte durch Kommas trennen, um auch mehrere Animationen in einem Selektor zu deklarieren. Im folgenden Beispiel möchten wir die Farbe des Kreises in einem ändern und @keyframeihn gleichzeitig von einer Seite zur anderen bewegen.

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

Performance

Das Animieren der meisten Eigenschaften ist ein Leistungsproblem. Daher sollten wir vor dem Animieren von Eigenschaften mit Vorsicht vorgehen. Es gibt jedoch bestimmte Kombinationen, die sicher animiert werden können:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Welche Eigenschaften können animiert werden?

MDN verfügt über eine Liste von CSS-Eigenschaften, die animiert werden können. Animierbare Eigenschaften tendieren zu Farben und Zahlen. Ein Beispiel für eine nicht animierbare Eigenschaft ist background-image.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
4 * 5 * 10 12 5,1 *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6,0-6,1 *

Mehr Informationen

  • Animation auf MDN
  • Verwenden von CSS-Animationen
  • Animation auf W3C
  • Jank Busting für eine bessere Renderleistung
  • Webanimation bei der Arbeit
  • Fünf Möglichkeiten, verantwortungsbewusst zu animieren
  • Zustandsspringen, negative Verzögerungen, animierter Ursprung und mehr
  • Starten von CSS-Animationen auf halbem Weg
  • Hochleistungsanimationen