Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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)

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um Web Designern bei ihren alltäglichen Problemen zu helfen. Neben diesem Blog bieten wir noch weitere Trainings-Möglichkeiten wie Schulungen, Bücher oder Video-Trainings an. Detaillierte Informationen findet ihr hier.

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.

Website-Projekte mit kulturbanause

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

Übersicht Kompetenzen →

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.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: