Animation im Web
Webanimationen mit CSS und GIFs sind beliebte Techniken, um Websites visuell ansprechender zu gestalten. CSS ermöglicht es, Bewegung und Interaktionen zu erstellen, während GIFs eine einfache Möglichkeit bieten, animierte Inhalte einzubinden. Durch geschickte Nutzung dieser Tools können Webentwickler die Benutzererfahrung verbessern und die Aufmerksamkeit der Besucher auf wichtige Inhalte lenken.
GIF
Ein GIF (Graphics Interchange Format) ist eine spezielle Art von Bilddatei, die mehrere Bilder oder Einzelbilder (Frames) enthält und diese in einer bestimmten Reihenfolge abspielt, um eine Animation zu erzeugen
Das GIF setzt sich aus insgesamt 48 Bildern zusammen.
Bilder die beim zusammenfügen
eine Animation ergebenn.
Bewegungs-Tween
CSS Animation (Keyframes)
CSS-Keyframes sind ein leistungsstarkes Werkzeug in der Welt des
Webdesigns. Sie ermöglichen es Entwicklern, Animationen und Bewegungen
zu erstellen, die das Aussehen und Verhalten von Elementen auf einer
Webseite dynamisch verändern.
Die Keyframes definieren den Verlauf einer Animation über einen
bestimmten Zeitraum hinweg. Sie legen fest, wie sich ein Element von
einem Anfangszustand zu einem Endzustand bewegt oder verändert. Zum
Beispiel kann eine Keyframe-Animation verwendet werden, um ein Element
sanft über den Bildschirm gleiten zu lassen oder um ein Element
pulsieren zu lassen, um die Aufmerksamkeit des Benutzers zu erregen.
Die Syntax für das Definieren von Keyframes in CSS ist relativ
einfach. Man beginnt mit dem Schlüsselwort @keyframes, gefolgt von
einem Namen für die Animation und geschweiften Klammern, die den
Verlauf der Animation definieren. Innerhalb dieser Klammern können
verschiedene "Schlüsselbilder" definiert werden, die die verschiedenen
Stadien der Animation repräsentieren.
/* Example: */
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.element {
animation: slide-in 1s ease-in-out;
}
