kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Interaktionen und Mouse-Over-Effekte mit CSS3-Transitions

Mit der CSS-Eigenschaft transition könnt ihr anschauliche Interaktionen und Mouse-Over-Effekte erzeugen, ohne dabei Javascript oder Flash 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«). In diesem Beitrag lernt ihr die in diesem Zusammenhang relevanten CSS-Eigenschaften kennen.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Die verschiedenen Eigenschaften von CSS3-Transitions

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.

Eine Animation mit CSS3-Transitions erzeugen

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

Wenn euch die verfügbaren Standardwerte nicht ausreichen sollten, könnt ihr mit diesem Tool einen eigenen Verlauf der Animationsgeschwindigkeit festlegen. Die Schreibweise für die transition-timing-function wäre dann:

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

Stufenweise Übergänge sind auch möglich

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)

Browser-Support

CSS3-Transitions werden vom Internet Explorer leider erst ab Version 10 unterstützt, auch für den Opera Mini gibt es keinen Support. In allen anderen Browsern funktionieren CSS3-Transitions. Damit auch ältere Versionen der Browser das Feature korrekt umsetzen, solltet ihr derzeit noch die entsprechenden Vendor-Prefixes verwenden. Den detaillierten Browser-Support entnehmt ihr bitte der Website caniuse.com.

-webkit-transition: background-color 2ms ease-out 1s;
-moz-transition: background-color 2ms ease-out 1s;
-o-transition: background-color 2ms ease-out 1s;
transition: background-color 2ms ease-out 1s;

 

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.