CSS/Tutorials/Animation/Transition

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Animation
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in CSS


Mit transition können Sie Werte von CSS-Eigenschaften allmählich oder schrittweise ändern, indem die dazwischenliegenden Werte interpoliert werden. Eine Transition bezeichnet den Übergang zwischen zwei Zuständen eines HTML-Elements. Transitionen werden dabei durch eine Benutzeraktion ausgelöst.

Information: Benutzeraktion

Auf Webseiten können Besucher interaktive Elemente wie Links oder Checkboxen mit Maus „hovern“ oder mit der Tastatur fokussieren.
Eine solche Benutzeraktion kann mit dynamischen Pseudoklassen selektiert und entsprechend gestaltet werden.
Während dies bis jetzt nach dem Motto „Ein/Aus“ umgeschaltet wurde, können Sie nun weiche Übergänge realisieren.

Allerdings sind nicht alle Eigenschaften animierbar. So können Sie etwa nicht weich zwischen verschiedenen Schriftarten umschalten und auch die Animation von z-index wird Ihnen kein Fading erzeugen.

transition[Bearbeiten]

Die Eigenschaft transition ist eine Zusammenfassung der möglichen Einzelangaben transition-property, transition-duration, transition-timing-function und transition-delay.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Eigentlich ist nur die Angabe der zu animierenden CSS-Eigenschaft, bzw. der Wert all und die Dauer des Übergangs nötig (Standardwert der Dauer ist 0, sodass es zu einem abrupten Übergang kommt).

Link mit weichen Übergang bei :hover ansehen …
a {
	box-shadow: inset 0 0 #e6f2f7;	
}
a:hover,
a:focus {
	box-shadow: inset 0 -30px #e6f2f7;	
}  

#tr1 { transition: all 2s; }

Im Beispiel erhält der Link bei :hover und :focus einen 30px hohen, hellblauen Innenschatten. Da die Animation über 2 Sekunden erfolgt, „fährt“ der Schatten von unten hoch.

Auch bei dem Verlassen des :hover gibt es wieder einen weichen Übergang - im Unterschied zum zweiten Link:

Kombination von weichen und harten Übergängen ansehen …
#tr1 { transition: all 2s; }
#tr1:hover,
#tr1:focus { }  

#tr2 { }
#tr2:hover,
#tr2:focus { transition: all 2s;}  

#tr3 { transition: all 2s; }
#tr3:hover { transition: none;}

Der zweite Link mit der id tr2 erhält die transition nur im :hover-Zustand. Bei :hover erfolgt ein abruptes Einschalten - erst beim Verlassen verschwindet der Hintergrundschatten langsam wieder.

Im dritten (nicht im Live-Beispiel enthaltenen) Fall würde der Übergang von :hover animiert, der Weg zurück durch: transition:none jedoch mit einem harten Übergang realisiert.

Die Deklarationen mit leeren Anweisungsblöcken können natürlich weggelassen werden, sie stehen nur zur Verdeutlichung im Beispiel.

Einzelangaben[Bearbeiten]

Folgende Einzel-Angaben sind bei transition möglich:

  • none: keine transition, „harter“ Übergang
  • transition-property: legt fest, welche Eigenschaft(en) verändert werden soll(en)
  • transition-duration: legt die Dauer des Transitions-Übergangs fest
  • transition-timing-function: definiert die Geschwindigkeitskurve des Übergangs
  • transition-delay: Startverzögerung des Übergangs
  • initial: Werte werden auf Standardwert zurückgesetzt
  • inherit: Werte werden vom Elternelement übernommen
Beachten Sie: Wenn Sie zwei Zeitwerte angeben, ist der erste die Dauer, der zweite immer Beginn der Animation.


transition-property[Bearbeiten]

Die Eigenschaft transition-property legt fest, welche Eigenschaften verändert werden sollen.

Folgende Angaben sind möglich:

  • none: die Transition wird nicht ausgeführt
  • all: alle Eigenschaften werden verändert (Standardwert)
  • Eigenschaft: durch Komma getrennte Liste von CSS-Eigenschaften
  • initial: Werte werden auf Standardwert zurückgesetzt
  • inherit: Werte werden vom Elternelement übernommen

transition-duration[Bearbeiten]

Die Eigenschaft transition-duration legt die Dauer des Übergangs fest.

Folgende Angaben sind möglich:

  • Zeit: Zeitangabe in Sekunden(s) oder Millisekunden(ms)
    Standardwert ist 0; also ein abrupter Übergang
  • initial: Werte werden auf Standardwert zurückgesetzt
  • inherit: Werte werden vom Elternelement übernommen

transition-timing-function[Bearbeiten]

Die Eigenschaft timing-function definiert die Geschwindigkeitskurve des Transitions-Übergangs.

Folgende Angaben sind möglich:

  • ease: Übergang mit langsamen Start, beschleunigt und endet langsam (Standardwert) (⇔ cubic-bezier(0.25,0.1,0.25,1))
  • linear: Übergang mit gleicher Geschwindigkeit vom Start bis zum Stop (⇔ cubic-bezier(0,0,1,1))
  • ease-in: Übergang mit einem langsamen Start (⇔ cubic-bezier(0.42,0,1,1))
  • ease-out: Übergang mit einem langsamen Ende (⇔cubic-bezier(0,0,0.58,1))
  • ease-in-out: Übergang mit einem langsamen Start und Ende (⇔ cubic-bezier(0.42,0,0.58,1))
  • cubic-bezier(n,n,n,n): möglich sind numerische Werte zwischen 0 bis 1
  • initial: Werte werden auf Standardwert zurückgesetzt
  • inherit: Werte werden vom Elternelement übernommen
Autorennen ansehen …
.linear .auto {
  transition-timing-function: linear;
}
 
.ease-in .auto {
  transition-timing-function: ease-in;
}
 
.ease-out .auto {
  transition-timing-function: ease-out;
}
 
.ease-in-out .auto {
   transition-timing-function: ease-in-out;
}

Im Beispiel sehen Sie, wie die Animation je nach gewählter transition-timing-function unterschiedlich beschleunigt. Allerdings kommen alle gleichzeitig im Ziel an. Die Animation wird mit der Pseudoklasse :target ausgelöst.

Übrigens, es wurden keine externen Bilder eingebunden, die Grafiken wurden alle mit CSS erzeugt. Die Farbwerte wurden mit der CSS-Variable currentColor festgelegt, sodass spätere Änderungen nur im Farbwert des html-Elements getätigt werden müssen.

transition-delay[Bearbeiten]

Die Eigenschaft transition-delay legt fest, mit welcher Verzögerung der Übergang ausgelöst werden soll.

Folgende Angaben sind möglich:

  • Zeit: Zeitangabe in Sekunden (s) oder Millisekunden (ms)
    Standardwert ist 0; also ein sofortiger Beginn
  • initial: Werte werden auf Standardwert zurückgesetzt
  • inherit: Werte werden vom Elternelement übernommen
Bildergalerie mit einfliegenden Bildunterschriften ansehen …
figure h2 {
  transform: translateY(-200px);
  transition: all 0.3s ease-in-out;
}
 
figure:hover h2 {
  transform: translateY(0px);
  transition-delay: 0.4s;
}
 
figure p {
  transform: translateX(200px) rotate(90deg);
  transition: all 0.4s ease-in-out;
}
 
figure:hover p {
  transform: translateX(0px) rotate(0deg);
  transition-delay: 0.2s;
}
 
figure a.info {
  transform: translateY(-200px);
  transition: all 0.2s ease-in-out;
}
 
figure:hover a.info {
  transform: translateY(0px);
  transition-delay: 0.3s;
}

Im Beispiel werden die Bildunterschriften bei :hover mit unterschiedlichen Verzögerungen eingeblendet. Für die Einblendung werden die verschiedenen Funktionen von transform verwendet.

Anwendungsbeispiele[Bearbeiten]