CSS3 Animationen
Man kann mit CSS3 Animationen Elemente bewegen, ihre Größe ändern, Farben anpassen und viele andere visuelle Effekte erzeugen, ohne auf JavaScript oder andere Programmiersprachen zurückgreifen zu müssen. Dafür gibt es die Transitions und Keyframe Animationen.
Transition
Man definiert einen Übergang, indem du die transition-Eigenschaft auf das betreffende Element anwendest. Diese Eigenschaft gibt an, welche Stileigenschaften animiert werden sollen und wie lange die Animation dauern soll. Um eine Transition zu definieren braucht es mindestens zwei Angaben:
- transition-property -> die verändernden Eigenschaft (bspw. Hintergrundfarbe, Textfarbe, width etc.)
- transition-duration -> Dauer der Animation (bspw. 0.3s, 600ms)
weitere Eigenschaften sind:
- transition-timing-function -> Geschwindigkeitskurve des Effekts
- ease -> langsamer Start, schnell, langsames Ende
- linear -> gleiche Geschwindigkeit von Anfang bis Ende
- ease-in -> langsames Ende
- ease-in-out -> langsamer Start und Ende
- transition-delay -> an wann die Animation beginnen soll (bspw. 1s, 0.5s)
Für diese Eigenschaften gibt es dann eine kurzschriebweise:
transition: transition-property transition-duration transition-timing-function transition-delay;
Das könnte dann so aussehen:
transition: backgroundcolor 0.5s ease 500ms;
Es gibt die Eigenschaft Transform:
- translate -> Element horizontal (x-Achse) oder vertikal (y-Achse) verschieben (bspw. 50px, 20px)
- rotate -> Element drehen & denk Winkel in Grad angeben (bspw. 45deg)
- scale -> grösse Verändern (Vergrössern/ Verkleinern) (bspw. 1.5)
- skew -> Element auf X- oder Y-Achse neigen um Verzerrung zu erzeugen (bspw. 30deg, 0)
Man kann auch mehrere Tranformationen kombinieren:
transform: translate(50px, 20px) rotate(45deg) scale(1.5);
Keyframes
Keyframes ermöglichen die präzise Steuerung von Animationen über definierte Stadien oder Zeitpunkte. Man kann Keyframes verwenden, um die Animation von einem Zustand zum nächsten zu steuern. Um sie zu verwenden nutz man die "@keyframes" Regel. Diese Regel definiert eine benannte Animation und die dazugehörigen Keyframes.
Zuerst erstellt man mit @keyframes die Regel. Hierbei kann man verschieden Zeitpunkte wie bspw. 50% festlegen und eine bestimmte Animation wie bspw. opacity festlegen.
Die Regel anwenden kann man dann indem man es der css klasse zuweisen. Hierfür gibt es verschiedene Eigenschaften:
- animation-name -> Name der Animation (gleich wie man bei @keyframes benannt hat)
- animation-duration -> Dauer der Animation in s (muss unbedingt angegeben werden da sonst keine Animation statt dindet)
- animation-timing-function -> Verlauf Animations Geschwindigkei
- ease -> langsamer Start, schnell, langsames Ende (Standartwert)
- linear -> gleiche Geschwindigkeit von Anfang bis Ende
- ease-in -> langsames Ende
- ease-out -> langsamer Start und Ende
- ease-in-out -> Beginn & Ende langsam, Mitte schneller
- cubic-bezier(n,n,n,n) -> vier Werte zwischen 0&1 angeben um Beschleunigung selbst zu definieren
- steps(n) -> Definition in diskreten Schritten (angeben wieviele Schritte es geben soll)
Diese Animationen könnten dann so aussehen
