Zur Startseite wechseln
CSS




Der Inhalt ist erst nach dem Einloggen sichtbar



Aktuell geöffnete Datei: 'keyframes_animation'




Keyframes

Optionen:
animation-name: Name 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-name: slidein;
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))
animation-iteration-count: 1; Zahl = Anzahl an Wiederholungen | infinite = endlos
animation-direction: alternate; normal = Vorwärts | 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


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

Beispiele

1
.div {
     animation-name: divkeyframes;
     animation-duration: 3s;
     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 normal 0s infinite;
     height:300px;
     width:300px;
}
@keyframes divkeyframes {
     from {
          background-color: green;
     }
     to {
          background-color: red;
     }
}
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.

Das könnte eine Überschrift sein






































Reproduzieren Sie folgende Animation.
BSP 3







































bsp4












































































































Pause hinzufügen möglich ohne JavaScript

5


cubic-bezier
0.9,0.05,0.43,1.7




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