CSS/Tutorials/Animation/Transition

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

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.

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.

Hauptartikel: CSS/Eigenschaften/animierbare Eigenschaften

transition[Bearbeiten]

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

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]