transform

• transform:rotate(xdeg); | drehen
  transform:scale(x); | skalieren
  transform:skew(xdeg,ydeg) | verzerren
  transform:skewx(xdeg); skewy(-ydeg); | verzerren
  transform:translate(+xpx,-y%) | versetzten
  transform:perspective(Xpx) | Nähe des 3D-Effekts (kleiner Wert=Nah; großer Wert=Fern)
  transform-origin: center center; | legt einen Drehpunkt für die Rotation eines Elements fest, durch top, left, bottom, right, und center, durch % oder px.
• Mit @keyframes sind Animationen möglich.
• Es lassen sich alle HTML Elemente mit transform bearbeiten.
• cssgenerator/transform
• mediaevent/css/transform

Animation transition

• input:activ {
    border-bottom-color: blue;
    border-bottom-width: 4px;
    transition:
      border-bottom-color 2s,
      border-bottom-width 2s;
  }
• CSS transition ändert den Wert einer CSS-Eigenschaft über die Zeit.
  Transition ist die Vorstufe zu Animationen.
  @Keyframe Animationen sind eine Folge von Transitions.
• mediaevent/css/transition
• www.transition.style
• joshcollinsworth.com/blog/great-transitions

Animation @keyframes

• .beispiel {
    animation-name: zumBeispiel; | Name der Animation
    animation-duration: 5s; | Dauer der Animation
    animation-iteration-count: infinite; | Anzahl der Wiederholungen
  }
• @keyframes zumBeispiel {
    from { transform: translateX(0px) }
    to { transform: translateX(-100px) }
  }
• animation-name: | Name der Animation
  animation-delay: | Verzögerung (in Sekunden) bevor die Animation startet
  animation-direction: | Richtung der Animation (forwards, backwards, alternate)
  animation-duration: | Dauer der Animation (in Sekunden)
  animation-fill-mode: | Zustand der Animation vor und/oder nach dem Start
  animation-iteration-count: | Anzahl der Wiederholungen der Animation
  animation-play-state: | gibt an, ob die Animation gerade abgespielt wird oder pausiert
  animation-timing-function: | Eine Kurve für das Bewegungsmuster der Animation (ease, ease-in, ease-in-out, linear, cubic-bezier(n,n,n,n), step-start, step-end, steps(int,start|end))
• @keyframes-Animationen ähneln CSS transition, aber anders als Transitions setzen CSS-Keyframes eine Animationen automatisch und kontinuierlich in Kraft, und nicht als Reaktion auf ein Event wie ein Mausklick, ein Hovern der Maus oder ein Touch.
• mediaevent/css/animation
• keyframes.app