Animation

Aus SELFHTML-Wiki
(Weitergeleitet von CSS/Tutorials/Animation)
Wechseln zu: Navigation, Suche
Animation Icon.svg

Das menschliche Auge reagiert instinktiv auf Bewegung. Deshalb sind Animationen eine gute Möglichkeit, Aufmerksamkeit auf wichtige Bereiche Ihrer Webseite zu lenken und Interesse zu erregen. Animieren kommt aus dem Lateinischen und heißt ursprünglich zum Leben erwecken.

Gelungene Animationen verbessern die Interaktion und bringen eine individuelle Note in Webseiten.

  • Übergänge – sanfte Veränderungen ohne Aufwand

    weiche Übergänge zwischen zwei Werten

  • mehrstufige Animationen

    komplexe Abfolgen und Bewegungsmuster

    • keyframes (Wegpunkte für die Animation)
    • Dauer und Wiederholungen
  • Pfad-Animationen

    entlang von Kurven, Schleifen und elliptischen Umlaufbahnen

Siehe auch

  • Web Animations (WAAPI)

    Animationen mit JavaScript steuern

  • SMIL
    • animate
    • animateMotion
    • animateTransform
  • Transform
    mit CSS
    drehen,
    skalieren, schräg
    stellen und
    verschieben
  • Bilder präsentieren
    • Bildergalerie mit Scroll Snap
    • Lazy loading mit animation-timeline: view()
  • Shape-Morphing
    eine Form fließend in eine andere verwandeln

Abgerufen am 15.12.2025
von "http://wiki.selfhtml.org/wiki/Animation"