Hinweis

Aufgrund technischer Probleme ist unser Forum im Moment nicht erreichbar. Wir bitten um Verständnis und hoffen auf Beseitigung der Schwierigkeiten bis spätestens Montag, 25.6. Unser Blog und unser Wiki sind nach wie vor auch im Moment verfügbar.

CSS/Eigenschaften/Animation/transition

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Animation(Weitergeleitet von Transition)
Wechseln zu: Navigation, Suche

Durch transition können Sie Wertänderungen von CSS-Eigenschaften animieren.

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

Details: caniuse.com

allgemein[Bearbeiten]

Während eine Änderung mit :hover bis jetzt nach dem Motto „Ein/Aus“ umgeschaltet wurde, kann man mit transition die 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.

Sie können aber durchaus unterschiedlich auf Benutzeraktionen reagieren. So ist es möglich, den Übergang (neutral → gehovert) anders zu gestalten als den Übergang (gehovert → neutral).

Beispiel ansehen …
div       { width: 150px; background-color: gold; }  
div:hover { width: 300px; background-color: red; }
/* transitions */

#div1 { }
#div1:hover { transition: all ease 2.5s;}  
	
#div2 { transition: all ease 2.5s; }
#div2:hover { }  
	
#div3 { transition: all ease 2.5s; }
#div3:hover { transition: none;}  
	
#div4 { }
#div4:hover { }
  • #1#: Hier gibt es den weichen Übergang nur, wenn der Mauszeiger das Element erreicht.
  • #2#: Dieses Element wird bei jeder Zustandsänderung animiert.
  • #3#: Hier gibt es den weichen Übergang nur, wenn der Mauszeiger das Element verlässt. transition wird für den Übergang (neutral → gehovert) explizit auf none gesetzt
  • #4#: ohne weiche Übergänge
Die Deklarationen mit leeren Anweisungsblöcken können natürlich weggelassen werden, sie stehen nur zur Verdeutlichung im Beispiel.

transition[Bearbeiten]

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

Folgende Angaben sind möglich:

Beachten Sie: Wenn Sie zwei Zeitwerte angeben, ist der erste die Dauer, der zweite immer Beginn der Animation.
Beispiel: Navigationsleisten mit einem weichen Übergang einblenden ansehen …
nav ul li ul {
  margin: 0; 
  padding: 0;
  position: absolute;
  top: 2.5em; 
  font: 0/0 serif;            /* Unternavigation ausblenden */
  z-index: -1;
  transition: all 0.5s ease-in;
}
 
nav ul li:hover ul {
  font: inherit;
  z-index: auto;               /*  Unternavigation einblenden */
}

Im Beispiel werden Navigationselemente, die von der Maus überfahren werden, vergrößert.
Damit es zu keinem abrupten Übergang kommt wird die Shorthand-Version der transition-Eigenschaft verwendet. Die Änderungen aller CSS-Eigenschaften passieren allmählich innerhalb von 0.5 Sekunden. Als Wert für transition-timing-function wird ease-in verwendet.
Die Untermenüs werden ebenfalls mit einem weichen Übergang eingeblendet. Der Hintergrund der Navigationselemente wurde mit linear-gradient()-Verläufen gestaltet.

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
Beispiel 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
Beispiel 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]