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

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

Browserunterstützung
caniuse.com

Eigentlich ist nur die Angabe der zu animierenden CSS-Eigenschaft, bzw. der Wert all und die Dauer des Übergangs nötig (Der Standardwert für die Dauer ist 0s, sodass es ohne diese Angabe zu einem abrupten Übergang käme).

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:focus,  
#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

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

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

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 0s; also ein abrupter Übergang
  • initial: Werte werden auf Standardwert zurückgesetzt
  • inherit: Werte werden vom Elternelement übernommen

transition-timing-function

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

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 0s; 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:focus h2,
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:focus p,
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:focus a.info,
figure:hover a.info {
  transform: translateY(0px);
  transition-delay: 0.3s;
}

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

Anwendungsbeispiele

Rehe im Wald: scheinbare Animation einer Schlüsselwort-Eigenschaft

Transitionen sind grundsätzlich nur für numerische CSS-Eigenschaften möglich. Mit Schlüsselworteigenschaften geht das nicht, weil der Browser hier keine Zwischenwerte berechnen kann. Man kann eine solche Transition aber simulieren, indem beide gewünschten Darstellungen erzeugt, eine davon mit opacity:0 unsichtbar macht und dann die Opacity-Eigenschaft animiert, um zu überblenden.

Das folgende Beispiel zeigt eine Waldlandschaft mit zwei Rehen. Fährt die Maus über die Rehe (oder bringt man mit Tab den Fokus darauf), wird scheinbar der Überblendungsmodus (mix-blend-mode) animiert. In Wahrheit gibt es drei Bilder: einmal die Waldlandschaft, und dann zweimal das Rehe-Bild, absolut über dem Waldbild positioniert, aber mit verschiedenen Werten für den mix-blend-mode.

Pseudo-Animation per Opacity ansehen …
figure {
  position:relative;
}
.rehe {
  position:absolute;
  top: 180px; left: 120px;
  transition-duration: 1s;
  transition-property: opacity;
}
.rehe.regular {
  mix-blend-mode: saturation;
  z-index: 2;
}
.rehe.hover {
  opacity: 0;
  mix-blend-mode: normal;
}
.rehe.regular:is(:hover,:focus) {
  opacity: 0;
}
.rehe.regular:is(:hover,:focus) ~ .rehe {
  opacity: 1;
}

<img src="landschaft.jpg" alt="lichter Wald mit Gras">
<img class="rehe regular" tabindex=0 src="https://wiki.selfhtml.org/images/5/53/Rehe.png" alt="zwei Rehe">
<a class="rehe hover" href="https://de.wikipedia.org/wiki/Reh">
  <img src="https://wiki.selfhtml.org/images/5/53/Rehe.png" alt="">
</a>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Animation/Transition&oldid=98463“