Veröffentlicht in Web.

Transitions & Animationen in CSS

Marco Coric | 11.2023.

Co-Autor(en): Lars Pablo Freitag

Animationen begegnen uns heute tagtäglich in verschiedensten Formen auf den meisten Webseiten im Internet.
Viele davon nehmen wir nur noch unterbewusst wahr und doch haben sie eine große Auswirkung auf die Nutzererfahrung. In diesem Blog beschäftigen wir uns mit Animationen jeglicher Art und wie diese ihren Weg in den Browser des Nutzers finden.

CSS-Transitions

Eine Transition beschreibt die Veränderung einer oder mehrerer CSS-properties eines Objektes über einen bestimmten Zeitraum. Der Anfang muss hierbei durch einen Trigger ausgelöst werden, während das Ende nach Ablauf der Transition-Dauer eintritt.

Transition-Eigenschaften

transition-duration: Dauer der Transition nach Auslösen des Triggers
transition-delay: Zeitabstand zwischen Auslösen des Triggers und starten der Transition
transition-property: Angeben der zu verändernen CSS-Eigenschaft
transition-timing-function: Festlegen des Zeitverhaltens

timing-function

linear

Entspricht cubic-bezier(0.0, 0.0, 1.0, 1.0)

Sorgt für eine gleichbleibende Geschwindigkeit über die ganze Transition.

ease

Entspricht cubic-bezier(0.25, 0.1, 0.25, 1.0)

Beschleunigt die Transition am Anfang, um sie am Ende langsam ausklingen zu lassen.

steps

Mithilfe von steps(a, <jumpterm>) kann man die Transition gezielt an mehreren Stellen einfrieren, wobei a beschreibt wie oft angehalten wird und der jeweilige <jumpterm> in welchem Verlauf dies geschieht.

cubic-bezier

Mithilfe des cubic-bezier(a, b, c, d) kann eine grafische Kurve beschriebenen werden, welche den Zeitverlauf bestimmt. a und c müssen hierbei zwischen 1 und 0 liegen.

Für ein besseres Verständnis können wir https://cubic-bezier.com/ oder andere Generatoren empfehlen, welche graphisch veranschaulichen, wofür a-d stehen.

Transition-Beispiel

In diesem Beispiel wurden in einer 2s Transition verschiedenste CSS-Eigenschaften verändert. Um einen genaueren Überblick in alle Einzelheiten zu bekommen, kann man sie hier einzeln betrachten.

Größe
`width;`

Durch die Veränderung der Breite des Quadrats wird es nach rechts größer.

Drehung
`transform: rotate();`

Durch eine festgelegt 360 Grad Drehung fängt das Quadrat an sich zu drehen.

Position
`left;`

Durch das Angeben einer neuen x-Achsen Position bewegt sich das Quadrat von links nach rechts.

Farbe
`background-color;`

Die Farbe des weißen Quadrats wird durch das Ändern der background-color der DIV rot.

Form (Quadrat zu Kreis)
`border-radius;`

Durch das Festlegen des border-radius auf 50% werden die harten Kanten des Quadrats zu einem Kreis.

CSS-Animationen

Animationen zeugen von deutlich höherer Komplexität als Transitions. Neben Start- und Endpunkt der Animation können jetzt zusätzliche Keyframes benutzt werden, diese zeigen dem Programm wie der gerenderte Frame zu diesem Zeitpunkt aussehen soll. Es gibt hierbei kein Limit und man kann frei entscheiden wie viele Keyframes man hinzufügen möchte. Außerdem können property-values in Keyframes angelegt und verändert werden ohne vorher deklariert werden zu müssen.

animation-property

animation-name: legt den Namen für die Keyframe-Animation fest
animation-duration: legt die Zeit für einen Animationszyklus fest
animation-delay: Zeitabstand zwischen Auslöser und tatsächlichem Start der Animation
animation-direction: bestimmt die Zeitlaufrichtung der Animation
animation-fill-mode: beschreibt den Zustand des Objekts vor und nach der Animation
animation-iteration-count: setzt die Anzahl, wie oft eine Animation wiederholt werden soll
animation-play-state: gibt an, ob die Animation läuft oder pausiert wird
animation-timing-function: festlegen des Zeitverhältnisses

Transition	Animation
Anfangs- und Endpunkt	Anfangs- und Endpunkt + Keyframes
benötigt Trigger als Start	kann mit Trigger als auch automatisch gestartet werden
läuft einmal	kann unendlich oft wiederholt werden
läuft zeittechnisch vorwärst bis der Trigger entfernt wird und dann rückwärts	kann in alle Zeitrichtungen laufen

Animation + Tutorial

Um zu veranschaulichen, wie eine Animation aufgebaut ist brechen wir den Code, der hier gezeigten Loading Animation in einzelne Teile auf und erklären diese:

Im ersten und einzigen HTML-Schritt verlinken wir unser CSS-stylesheet und erstellen im body eine Div der Klasse loader.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="animation.css" />
    <title><p>Loading Animation</p></title>
  </head>
  <body>
    <div class = "loader"></div>
  </body>
</html>

In CSS angekommen, wird der body eingefärbt und festgelegt, dass der Inhalt des bodys mittig platziert wird.

html,
body {
  height: 100%;
}

body {
  align-items: center;
  background-color: #242526;
  display: flex;
  justify-content: center;
}

Die Box, die das Grundgerüst der Animation ist, wird festgelegt und ihr wird die Grundanimation zugewiesen.

.loader {
  animation: rotate 1.5s infinite;
  height: 50px;
  width: 50px;
}

Zwei Kreise werden auf der linken Seite der Box platziert.

.loader:before,
.loader:after {
  border-radius: 50%;
  display: block;
  height: 20px;
  width: 20px;
}

Ein weiterer Kreis wird oben rechts in der Box erschaffen (Schatten des Kreis links oben). Die beiden oberen Kreise werden eingefärbt und ihnen wird ihre Animation zugewiesen.

.loader:before {
  animation: ball1 1.5s infinite;
  background-color: #f34;
  box-shadow: 30px 0 0 #ff6c87;
  margin-bottom: 10px;
}

Der vierte Kreis wird unten rechts hinzugefügt (Schatten des Kreis links unten). Die beiden unteren Kreise werden eingefärbt und ihnen wird ihre Animation zugewiesen.

.loader:after {
  animation: ball2 1.5s infinite;
  background-color: #bd2430;
  box-shadow: 30px 0 0 #ffffff;
}

Unsere Animation besteht eigentlich aus 2 seperaten Animationen. Zum einen aus der Rotier-Animation welche hier deklariert wird und sich auf die Box im Hintergrund bezieht. Dabei werden mit den verschiedenen Prozent-Angaben die Keyframes festgelegt.

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(0.8);
  }
  50% {
    transform: rotate(360deg) scale(1.2);
  }
  100% {
    transform: rotate(720deg) scale(0.8);
  }
}

Zum andere werden die Kreise, welche auf der Box liegen, in dieser und der nächsten Animation in die Mitte gezogen. Hierfür werden der Abstand und die Position der oberen zwei Kreise verändert.

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 rgb(255, 131, 141);
  }
  50% {
    box-shadow: 0 0 0 rgb(255, 131, 141);
    margin-bottom: 0;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 rgb(255, 131, 141);
    margin-bottom: 10px;
  }
}

Im letzten Schritt wird dasselbe für die unteren zwei Kreise durchgeführt.

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #ffffff;
  }
  50% {
    box-shadow: 0 0 0 #ffffff;
    margin-top: -20px;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #ffffff;
    margin-top: 0;
  }
}

Durch das Verknüpfen einer rotierenden Animation und der zusammenziehenden Animation der Kreise entsteht unser Ladebildschirm, den man so auch auf öffentlichen Webseiten wiederfinden könnte.

Transitions & Animationen in CSS

CSS-Transitions

Transition-Eigenschaften

timing-function

linear

ease

steps

cubic-bezier

Transition-Beispiel

Größe
`width;`

Drehung
`transform: rotate();`

Position
`left;`

Farbe
`background-color;`

Form (Quadrat zu Kreis)
`border-radius;`

CSS-Animationen

animation-property

Animation + Tutorial

Quellen & Referenzen

Downloads

Schlagworte

Auch interessant

Glassmorphism

Adobe Firefly

Card-Hover Effect

Durch Scrollen steuerbare Animation

Webflow

Enter/Eingabe drücken um die Suche zu starten

CSS-Transitions

Transition-Eigenschaften

timing-function

linear

ease

steps

cubic-bezier

Transition-Beispiel

Größewidth;

Drehungtransform: rotate();

Positionleft;

Farbebackground-color;

Form (Quadrat zu Kreis)border-radius;

CSS-Animationen

animation-property

Animation + Tutorial

Quellen & Referenzen

Downloads

Schlagworte

Auch interessant

Glassmorphism

Adobe Firefly

Card-Hover Effect

Durch Scrollen steuerbare Animation

Webflow

Cookies

Größe
`width;`

Drehung
`transform: rotate();`

Position
`left;`

Farbe
`background-color;`

Form (Quadrat zu Kreis)
`border-radius;`