Animation Duration
Mit der Funktion "animation-duration" kann die Zeitspanne angegeben werden,
die die Animation laufen soll.
Auch hier wird die Zeit in Sekunden angegeben.
#example3 {
#beispiel {
position: relative;
animation-name: stempel1;
animation-druration: 5s;
}
}
Example
Example
Bei diesem Beispiel dauert die erste Animation 5 Sekunden und die zweite 10 Sekunden.
Animation Iteration Count
Durch die Funktion "animation-iteration-count" lässt sich die Anzahl an Durchläufen angeben.
Dadurch läuft die Animation eine bestimmte Anzahl Malen.
#example4 {
#beispiel {
position: relative;
animation-name: stempel1;
animation-iteration-count: infinit;
}
}
Durch den Wert "infinit" wir die Animation unendlich oft ausgeführ.
Um die Anzahl zu begrenzen kann ansonsten einfach eine Zahl angegeben werden.
Animation Direction
Die "animation-direction" Funktion bringt die Möglichkeit mit sich,
die Animation vorwärts oder Rückwärts abzuspielen.
Es ist auch Möglich die Animation erst Vorwärts
und dann Rückwärts oder andres herum abzuspielen.
#example5 {
#beispiel {
position: relative;
animation-name: stempel1;
animation-direction: normal;
}
}
Example
Example
Hier dreht sich die erste Animation nach rechts
(normal) und die zweite nach links (reverse).
Als Möglichkeiten gäbe es noch zur Auswahl:
- alternate - erst Vorwärts, dann Rückwärts
- alternate-reverse - erst Rückwärts und dann Vorwärts
Animation Timing-Function
Mit "animation-timing-function" lässt sich bestimmen,
ob sich die Animation am Anfang, am Ende oder in der Mitte schneller
oder langsamer bewegt.
Außerdem kann die Animation auch immer gleichschnell durchlaufen.
#example6 {
#beispiel {
position: relative;
animation-name: stempel1;
animation-timing-function: linear;
}
}
Example
Example
Die erste Animation bewegt sich immer gleich schnell (linear)
und die zweite am Anfang und am Ende schneller als in der Mitte (ease).
Andere Möglichkeiten wären:
- ease-in - die Animation startet langsam
- ease-out - die Animation endet langsam
- ease-in-out startet und endet langsam
- cubic-bezier(n,n,n,n) - für eigene Angaben
Animation Fill-Mode
Durch die "animation-fill-mode" Funktion kann
die Animation einen Style bekommen
ohne das die Animation abgespielt wird. Es ist möglich zum Beispiel
das erste oder letzte Bild als dauerhaften Style
für die stillstehende Animation zu nehmen.
#example7 {
#beispiel {
position: relative;
animation-name: stempel1;
animation-fill-mode: forwards;
}
}
Weitere Möglichkeiten zum Einsetzten sind:
- none - Standard
- forwards - Style vom letzten keyframe
- backwards - Style vom letzten keyframe
- both - beide Styles werden verwendet