CSS3 Animationen: transition erklärt

Kategorie: HTML/CSS

Animationen bringen Bewegung auf die Seite und sorgen für das gewisse Etwas, um sich sich von der Konkurrenz abzuheben. Wählen Sie dezente Effekte und reduzieren Sie die Animationen auf wenige Einsatzbereiche. So wirkt Ihre Seite seriös und modern. Durch CSS3 ist es möglich, Animationen ohne Javascript und mit schnellen Ladezeiten zu realisieren.

Transition bedeutet auf Deutsch Übergang. Effekte mit transition zeichnen sich durch sanfte Übergange aus. Die Elemente verändern sich schrittweise und harmonisch. Die Animation startet nicht automatisch, erst bei einer Aktion (hovern mit der Maus) beginnt der Übergang.

Inhalt

Hintergrundfarbe eines Buttons bei :hover ändern

Hover-Effekt ohne transition

Der User bewegt die Maus über einen Button und die Hintergrundfarbe wechselt. Die Farbänderung erfolgt sofort.

HTML-Code

<a class="button" href="#">Button</a>
CSS

.button{
background-color:black;
color:white;
padding:12px 9px;
text-decoration:none;
}

.button:hover{
color:white;
background-color:green;
}

 

Hover-Effekt mit transition

Ergänzen Sie die CSS-Eigenschaft transition. Bewegen Sie die Maus über den Button, die Hintergrundfarbe ändert sich nun schrittweise. Das wirkt natürlicher und angenehmer.

HTML-Code

<a class="button transition" href="#">Button</a>
zusätzliches CSS

.transition{
transition-property:background-color;
transition-duration:2s;
}

Mit transition-property legen Sie die Eigenschaft fest, auf die sich transition bezieht. Durch transition-duration bestimmen Sie die Dauer des Übergangs.

Geschwindigkeit bzw. Verzögerung bei CSS3 Animationen

Zusätzlich geben Sie, falls erwünscht, mit der transition-timing-function noch den Verlauf der Animation an. Lassen Sie diese Angabe weg, erfolgt die Veränderung gleichbleibend (linear). Mit transition-timing-function: ease-in startet die Animation langsam und wird dann schneller. Der Befehl transition-timing-function: ease-out ease-out bewirkt das Gegenteil, also einen schnellen Start und dann eine Verlangsamung.

Veränderung in gleichmäßiger Geschwindigkeit

 
Button
 

HTML-Code

<a class="b_neu" href="#">Button</a>
zusätzliches CSS

.b_neu{
background-color:black;
color:white;
padding:12px 9px;
text-decoration:none;
}

.b_neu:hover{
color:white;
padding-right:120px;
transition-property:padding;
transition-duration:3s;
}

Die Breite des Button ändert sich beim hovern mit der Maus. Die Änderung erfolgt in gleichmäßiger Geschwindigkeit. Dabei ist es egal, ob Sie die Angabe transition-timing-function: linear einfügen oder nicht, weil es sich hierbei und die Standardeinstellung handelt.

Erst langsam, dann schnell transition-timing-function: ease-in

 
Button
 

HTML-Code

<a class="b_neu in" href="#">Button</a>
Zusätzliches CSS

.in{
transition-timing-function: ease-in;
}

Erst schnell, dann langsam transition-timing-function: ease-out

 
Button
 

HTML-Code

<a class="b_neu out" href="#">Button</a>
zusätzliches CSS

.out{
transition-timing-function: ease-out;
}

Animation mit Verzögerung starten durch transition-delay

 
Button
 

HTML-Code

<a class="b_neu del" href="#">Button</a>
zusätzliches CSS

.del{
transition-delay: 2s;
}

Bewegen Sie die Maus auf den Button. Die Animation startet mit 2 Sekunden Verzögerung.

Kurzschreibweise von CSS3-transition

CSS3 transition besteht aus den 4 in der Tabelle abgebildeten Angaben.

transition-property: Auf welche CSS-Eigenschaft bezieht sich die transition.
transition-duration: Wie lange dauert die transition?
transition-timinig-function: Wie läuft die transition ab? Gleichmäßig? Erst schnell dann langsam?
transition-delay: Soll die transition verzögert starten?

 
Listen Sie die Befehle nicht einzeln auf. Nutzen Sie die Kurzschreibweise:

property duration timing-function delay
transition: background 4s ease-in 1s;

 
Die ausführliche Schreibweise:

.a_effekt{
transition-property:background;	
transition-duration:4s;	
transition-timinig-function:ease-in;	
transition-delay:1s;
}

enstpricht somit:

.a_effekt{
transition:background 4s ease-in 1s;
}

 
Effekt
 
Gehen Sie mit der Maus auf den Button.

Der Hintergrund (transition-property:background;) ändert sich innerhalb von 4 Sekunden (transition-duration:4s;), die Änderung erfolgt erst langsam und dann schnell (transition-timinig-function:ease-in;)und fängt nach einer Verzögerung von 1 Sekunde (transition-delay:1s;) an.

Download der Beispiele für CSS3 transition

Laden Sie alle Beispiele aus diesem Beitrag im zip-Format runter.
 
▶ Beispieldatei runterladen

Verwandte Beiträge

HTML Tipps: Elemente zur Textformatierung

Die HTML-Elemente mit denen Textabschnitte kursiv oder fett ausgezeichnet werden können sind allgemein bekannt. Es gibt jedoch auch einige weniger bekannte Elemente mit denen Textelemente formatiert werden können. Inhalt HTML

HTML- Block und Inline-Elemente

Es gibt in HTML zwei grundsätzliche Arten von Elementen: Block und Inline-Elemente. Beide Arten von Elementen haben unterschiedliche Eigenschaften. Die Kenntnis dieser Eigenschaften ist die Grundlage für einen korrekten HTML-Code

HTML Tipps für besseren Quellcode

Der HTML-Quellcode einer Internetseite sollte übersichtlich, möglichst schmal und selbsterklärend sein. Ein übersichtlicher Quellcode kann leichter und vor allem schneller verändert werden. Je schmaler der Quellcode ist, umso geringer ist

Kontaktdaten auf der Homepage mit HTML

Auf jeder gewerblichen Webseite befinden sich die Adressdaten der Firma, zu der die Webseite gehört. Die Daten können auf verschiedene Weise durch HTML-Code dargestellt werden. Im folgenden Artikel wird kurz