um CSS-Animation zu verwenden, braucht man Keyframes, das zu animierende Element und die Animationsdetails. das zu animierende Element bewegt sich von keyframe zu Keyframe in der vorgegebenen Bewegung. Dafür benutzt man @keyframes animations-name geschwungene klammer und muss mindestens den ersten und letzten schritt deffinieren. Die Schritte gibt man mit prozentdanzahlen oder mit "from" und "to" an. @keyframes muss in die css-datei und die zu animierenden elemente plus die animationseienschaften in die html und css datei.
Sie werden zu den Eigenschaften von dem zu animierenden Element geschrieben:
animation-name: verbindet @keyframes mit dem element
animation-duration: legt die länge der animation fest; in s oder ms angegeben; gundeinstellung 0
animation-timing-function: legt geschwindigkeitskurve fest; angaben in: ease, ease-in, ease-out, ease-in-out, linear; Gundeinstellung: ease
animation-delay: legt eine zeitverzögerung fest; in s oder ms angegeben, Grundeinstellung 0
animation-iteration-count: gibt an wie oft die animation abgespielt werden soll; als nummern oder infinite fur eine sich ständig wiederhohlende animation; Grundeinstellung: 1
animation-direction: gibt an in welche richtung die animation abgespielt wird; angaben in: normal, reverse, alternate, alternate-reversee, initial, inherit; Grundeinstelluung: normal
animation-fill-mode: legt den stil fest wären die animation nicht läuft; angaben in: none, forwards, backwards, both; Grundeinstellung: none
animation-play-state: gibt an ob die animation läuft oder pausiert ist; angaben in: running, paused; Grundeinstellung: running
um alles zusammenzufassen: animation, alle angaben hintereinanderher schreiben, ohne komma nur mit leerzeichen