07 Mai, 2018

Animationen mit CSS

  • mit CSS3 wurden verschiedene Funktionen zu CSS hinzugefügt welche Animationen erlauben.
  • zum einen Transitions
  • und CSS Animationen

CSS Transitions

Transition Properties

  • transition-property: welche property soll animiert werden
  • transition-duration: die Dauer der Animation
  • transition-timing-function: Die Timing Funktion: http://easings.net/de
  • transition-delay: Die Verzögern bis Beginn der Animation

Transform

Transform Values

  • matrix: Eine 2D-Transformations Matrix
  • rotate: Ein Winkel um den rotiert werden soll
  • scale: Eine Skalierungsoperation
  • skew: Schert das Element um die angegebene Winkel
  • translate: Verschiebt ein Element um die angegebenen Werte

3D Transform

CSS Animation

Transforms sind nur möglich zwischen zwei verschiedenen CSS Zuständen. Die Zwischenzustände werden von Browser automatisch berechnet.

Wenn man über mehrere Zustände hinweggehen möchte benötigt man keyframes und CSS Animationen.

http://codepen.io/tune2fs/pen/OpJPVW?editors=1100

Show Box