CSS-Transitions: Interaktionen, Übergänge und Mouse-Over-Effekte gestalten

Mit der CSS-Eigenschaft transition könnt ihr attraktive Übergangseffekte, Interaktionen und Mouse-Over-Effekte erzeugen, ohne dabei Javascript verwenden zu müssen. Präziser ausgedrückt kann der Ausgangswert einer CSS-Eigenschaft fließend in einen neuen Wert übergehen (»Transition« zu Deutsch »Übergang«). 

CSS-Transitions Syntax

Die vier folgenden Longhand Properties stellt uns CSS zur Verfügung:

transition-property
legt fest, welche Eigenschaft geändert wird
transition-duration
regelt die Dauer der Animation
transition-timing-function
definiert den Geschwindigkeitsverlauf. Bei ease-in-out erfolgt die Animation zu Beginn beispielsweise langsam, beschleunigt dann und bremst gegen Ende noch einmal ab. Es existieren verschiedene Schlüsselbegriffe.
transition-delay
ermöglicht eine zeitliche Verzögerung.

Beispiel-Animation mit CSS-Transition

Im folgenden Beispiel erstellen wir eine einfache Animation, und verwenden dazu die Pseudoklasse :hover als Auslöser für den Übergang.

transition-beispiel
Einfaches Beispiel einer Transition – Ein Div ändert seine Farbe beim Mouseover
.kreis {
  background-color: blue;
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 1s;
  width: 100px;
  height: 100px;
  border-radius: 100%;
}
.kreis:hover {
  background-color: orange;
}

Die Kurzschreibweise für die oben gezeigte CSS-Transition schreibt sich wie folgt:

transition: background-color 2s ease-in-out 1s;

Dabei spielt die Reihenfolge der Werte eine untergeordnete Rolle, allerdings wird die erste Zahl als transition-delay interpretiert. Natürlich lassen sich so auch die Größe oder andere Eigenschaften eines Elements umwandeln und allerhand Effekte & Animationen erzeugen. Eine Liste aller animierbaren Eigenschaften findet ihr hier.

Die transition-timing-function genauer betrachtet

Für die transition-timing-function stehen fünf vordefinierte Werte zur Verfügung, deren Geschwindigkeitsverlauf hier kurz beschrieben wird:

ease:
kurz langsam – schnell – lange langsam
linear:
durchgehend gleich
ease-in:
langsamer Start
ease-out:
langsames Ende
ease-in-out:
langsam – schnell – langsam

Die Schreibweise für die transition-timing-function wäre dann:

.transition-timing-function: cubic-bezier(0,1,1,0)

Übergänge in abgestufter Animation

Es ist auch möglich, den Übergang nicht fließend sondern stufenweise ablaufen zu lassen.

Beispiel anzeigen

steps( , start):

steps( , start) legt fest, dass der Übergang in 4 gleichmäßigen Schritten erfolgt und der Effekt zu Beginn (»start«) jedes Schrittes eintritt.

 transition-timing-function: steps (4, start)

steps(, end):

Bei steps( , end) tritt der Effekt entsprechend am Ende jedes Schrittes ein.
Die Schreibweise wäre entsprechend:

 transition-timing-function: steps (4, end)

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Raimund Büchner

Benutzerbild

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Design + Code

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung