animation_keyframes

Welche Eigenschaften und Optionen können Animation benöten?

animation-name: Name zur zuordnung des Keyframes

animation-duration: Dauer des Keyframes

animation-timing-function: Art der Beschleunigung

animation-delay: Verzögerung des Starts der Animation nach Seitenaufruf

animation-iteration-count: Anzahl der Loops der Animation

animation-direction: Richtung der Animation

animation-fill-mode: Was soll angezeigt werden, wenn die Animation beendet ist








animation-name: colorchange;

animation-duration: 3s; in Sekunden (s) oder Millisekunden (ms)

animation-timing-function: linear = konstante Geschwindigkeit

ease (default) = langsamer Start, schnelle Mitte, langsames Ende
ease-in = wird immer schneller
ease-out = Wird immer langsamer
ease-in-out = Langsamen Start und langsames Ende
cubic-bezier(n,n,n,n)
steps(4) / (4, end) / (4, start)


animation-delay: Verzögerter Start (Sekunden (s) oder Millisekunden (ms)); 0s (default)

animation-iteration-count: 1 (default); Zahl = Anzahl an Wiederholungen | infinite = endlos

animation-direction: alternate; normal = Vorwärts (default) | reverse = Rückwärts | alternate 1x vorwärts dann 1x rückwärts | alternate-reverse | 1x rückwärts dann 1x vorwärts

animation-fill-mode: none | forwards | backwards | both








Was soll überhaupt animiert werden?
@keyframes name {
     from {
     }
     to {
     }
}






Kurzform der animation:
Keyframename
Keyframename duration
3s timing-function
ease-in delay
1s iteration-count
2 direction
reverse animation-fill-mode
forwards playstate
paused

Beispiele

1

.div {      animation-name: divkeyframes;      animation-duration: 3s;      animation-timing-function: ease;      animation-delay: 0s;      animation-iteration-count: infinite;      animation-direction: normal;      height:300px;      width:300px; } @keyframes divkeyframes {      from {           background-color: green;      }      to {           background-color: red;      } }

2

.div {      animation: divkeyframes 3s ease 0s infinite normal;      height:300px;      width:300px; } @keyframes divkeyframes {      from {           background-color: green;      }      to {           background-color: red;      } } Sie benötigen nur die Eigenschaften, die nicht per "richtig" default gesetzt sind. im obigen Beispiel würde ausreichen: animation: start2 3s infinite; um gleiche Animation zu erzeugen. default sind nämlich: animation-timing-function: ease; animation-delauy: 0s; animation-direction: normal;

Reproduzieren Sie das Einfliegen eines Texte.

Beispiel 1

Das könnte eine Überschrift sein

---

Wenn die Animation komplexer werden soll, benötigt man mehr Zwischenstufen! Die wird mit Prozenten realisiert:

ELEMENT {
     animation: NAME 5s ease 0s;
}
@keyframes NAME {
     0% {
          EIGENSCHAFT: WERT;
     }
     50% {
          EIGENSCHAFT: WERT;
     }
     100% {
          EIGENSCHAFT: WERT;
     }
}


Reproduzieren Sie eine Schriftgrößenveränderung mit Farbwechsel.

---

Reproduzieren Sie folgende Animation.

---

Darstellung im separaten Fenster!

Pause hinzufügen möglich ohne JavaScript

linear: cubic-bezier(0.0, 0.0, 1.0, 1.0);

ease: cubic-bezier(0.25, 0.1, 0.25, 1.0);

ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0);

ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0);

ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0);

Graph erstellen