animation

Probieren Sie es aus

animation: 3s ease-in 1s infinite reverse both running slide-in;

animation: 3s linear 1s infinite running slide-in;

animation: 3s linear 1s infinite alternate slide-in;

animation: 0.5s linear 1s infinite alternate slide-in;

<section class="flex-column" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  background-color: #1766aa;
  margin: 20px;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

@keyframes slide-in {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timeline
• animation-timing-function

Syntax

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slide-in;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slide-in;

/* two animations */
animation:
  3s linear slide-in,
  3s ease-out 5s slide-out;

Die animation-Eigenschaft wird als eine oder mehrere einzelne Animationen angegeben, getrennt durch Kommas.

Jede einzelne Animation wird wie folgt angegeben:

• Null, einmal oder zweimal vorkommender <time> Wert

• Null oder einmal vorkommende der folgenden Werte:

  • <single-easing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>

• Ein optionaler Name für die Animation, der none, ein <custom-ident>, oder ein <string> sein kann.

Werte

<single-easing-function>

Bestimmt die Art der Übergangs. Der Wert muss einer der in <easing-function> verfügbaren sein.

<single-animation-iteration-count>

Die Anzahl der Wiederholungen der Animation. Der Wert muss einer der in animation-iteration-count verfügbaren sein.

<single-animation-direction>

Die Richtung, in der die Animation abgespielt wird. Der Wert muss einer der in animation-direction verfügbaren sein.

<single-animation-fill-mode>

Bestimmt, wie Stile auf das Ziel der Animation vor und nach ihrer Ausführung angewendet werden sollen. Der Wert muss einer der in animation-fill-mode verfügbaren sein.

<single-animation-play-state>

Bestimmt, ob die Animation abgespielt wird oder nicht. Der Wert muss einer der in animation-play-state verfügbaren sein.

Beschreibung

Die Reihenfolge der Zeitwerte innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert, der als <time> geparst werden kann, wird der animation-duration zugeordnet, und der zweite wird der animation-delay zugeordnet.

Die Reihenfolge der anderen Werte innerhalb jeder Animationsdefinition ist ebenfalls wichtig, um einen animation-name-Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der animation-Kurzschreibweise als ein Wert für eine andere Animationseigenschaft als animation-name geparst werden kann, wird der Wert zuerst dieser Eigenschaft zugewiesen und nicht animation-name. Aus diesem Grund wird empfohlen, einen Wert für animation-name als letzten Wert in einer Liste von Werten anzugeben, wenn die animation-Kurzschreibweise verwendet wird; dies gilt auch dann, wenn Sie mehrere durch Kommas getrennte Animationen mit der animation-Kurzschreibweise angeben.

Obwohl ein Animationsname gesetzt werden muss, um eine Animation anzuwenden, sind alle Werte der animation-Kurzschreibweise optional und standardmäßig auf den Anfangswert für jede Langform-Komponente der Eigenschaft gesetzt. Der Anfangswert von animation-name ist none, was bedeutet, dass, wenn kein animation-name-Wert in der animation-Kurzschreibweise angegeben ist, keine Animation auf irgendeine der Eigenschaften angewendet wird.

Wenn der animation-duration-Wert in der animation-Kurzschreibweise weggelassen wird, beträgt der Standardwert für diese Eigenschaft 0s. In diesem Fall wird die Animation trotzdem stattfinden (die animationStart und animationEnd Veranstaltungen werden ausgelöst), aber es wird keine Animation sichtbar sein.

Im Fall des animation-fill-mode forwards Wert, verhalten sich animierte Eigenschaften, als ob sie in einem Satz will-change Eigenschaftswert enthalten wären. Wenn während der Animation ein neuer Stacking-Kontext erstellt wird, behält das Zielelement den Stacking-Kontext bei, nachdem die Animation beendet ist.

Barrierefreiheit

Blinkende und flackernde Animationen können problematisch sein für Menschen mit kognitiven Bedenken wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS). Zudem können bestimmte Arten von Bewegungen Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Sensibilität sein.

Überlegen Sie, eine Möglichkeit bereitzustellen, Animationen zu pausieren oder zu deaktivieren, sowie die Verwendung des Reduced Motion Media Query, um ein ergänzendes Erlebnis für Benutzer zu schaffen, die eine Präferenz für reduzierte Animationserlebnisse angegeben haben.

• Entwerfen von sichereren Web-Animationen für Bewegungsempfindlichkeit · Ein Artikel von An A List Apart
• Eine Einführung in die Reduced Motion Media Query | CSS-Tricks
• Responsives Design für Bewegung | WebKit
• MDN Verständnis von WCAG, Leitfaden 2.2 Erklärungen
• Verständnis des Erfolgskriteriums 2.2.2 | W3C Verständnis von WCAG 2.0

Formale Definition

Formale Syntax

animation = 
  <single-animation>#  

<single-animation> = 
  <time [0s,∞]>                       ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both       

<single-animation-play-state> = 
  running  |
  paused   

<keyframes-name> = 
  <custom-ident>  |
  <string>        

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

Beispiele

Sonnenaufgang

Hier animieren wir eine gelbe Sonne über einen hellblauen Himmel. Die Sonne steigt bis zur Mitte des Ansichtsfensters auf und fällt dann aus dem Bild.

<div class="sun"></div>

:root {
  overflow: hidden; /* hides any part of the sun below the horizon */
  background-color: lightblue;
  display: flex;
  justify-content: center; /* centers the sun in the background */
}

.sun {
  background-color: yellow;
  border-radius: 50%; /* creates a circular background */
  height: 100vh; /* makes the sun the size of the viewport */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(110vh);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
}

Mehrere Eigenschaften animieren

Anknüpfend an die Sonnenanimation aus dem vorherigen Beispiel fügen wir eine zweite Animation hinzu, die die Farbe der Sonne beim Auf- und Untergang verändert. Die Sonne startet dunkelrot, wenn sie unterhalb des Horizonts ist, und ändert sich zu einem leuchtenden Orange, wenn sie den höchsten Punkt erreicht.

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/* it is possible to animate multiple properties in a single animation */
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /* unset properties i.e. 'filter' will revert to default values */
  }
}

Mehrere Animationen anwenden

Hier ist eine Sonne, die auf einem hellblauen Hintergrund aufsteigt und fällt. Die Sonne dreht sich allmählich durch ein Spektrum von Farben. Das Timing der Position und der Farbe der Sonne sind unabhängig.

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /* multiple animations are separated by commas, each animation's parameters are set independently */
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

Mehrfache Animationen kaskadieren

Hier ist eine gelbe Sonne auf einem hellblauen Hintergrund. Die Sonne springt zwischen den linken und rechten Seiten des Ansichtsfensters hin und her. Die Sonne bleibt im Ansichtsfenster, obwohl eine Steiganimation definiert ist. Die Transform-Eigenschaft der Steiganimation wird durch die Sprunganimation "überschrieben".

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /*
    animations declared later in the cascade will override the
    properties of previously declared animations
  */
  /* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally */
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

Für zusätzliche Beispiele siehe Using CSS animations.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Using CSS animations
• JavaScript AnimationEvent API