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]