CSS transition-Eigenschaft
Wie man die CSS-Kurzschreibweise transition verwendet, um Zustandswechsel von Elementen zu animieren. Funktionen, Werte und Beispiele.
Die CSS-Eigenschaft transition ermöglicht es, die Änderung eines Eigenschaftswertes über die Zeit zu animieren, anstatt sie sofort umzuschalten. Wenn sich der Wert einer animierbaren Eigenschaft ändert — zum Beispiel weil der Benutzer ein Element mit dem Mauszeiger überfährt oder eine Klasse per JavaScript umgeschaltet wird — sorgt transition dafür, dass der Browser gleichmäßig vom alten zum neuen Wert interpoliert. So entstehen Ein- und Ausblend-, Gleit-, Wachstums- und Farbwechseleffekte ohne JavaScript-Animationsschleife.
transition ist eine Kurzschreibweise, die vier Einzeleigenschaften auf einmal setzt:
- transition-property — welche Eigenschaft animiert werden soll (z. B.
width,opacity,all). - transition-duration — wie lange der Übergang dauert (z. B.
2s,300ms). - transition-timing-function — die Geschwindigkeitskurve (z. B.
ease,linear,cubic-bezier(...)). - transition-delay — wie lange gewartet wird, bevor der Übergang beginnt.
Die Eigenschaft transition gehört zu den CSS3-Eigenschaften.
Aufbau der Kurzschreibweise
Ein einzelner Übergang wird wie folgt geschrieben:
transition: <property> <duration> <timing-function> <delay>;Nur transition-property und transition-duration sind unbedingt erforderlich, um einen sichtbaren Effekt zu erzielen; die Zeitfunktion ist standardmäßig ease und die Verzögerung 0s.
/* animate width over 2 seconds, default easing, no delay */
transition: width 2s;
/* full form: animate transform over 300ms with a custom curve, after a 100ms wait */
transition: transform 300ms ease-in-out 100ms;Der erste Zeitwert, den der Parser liest, ist immer die Dauer; der zweite ist die Verzögerung. transition: opacity 1s 2s bedeutet also Dauer 1s, Verzögerung 2s — nicht umgekehrt.
Wird die Dauer weggelassen, gilt standardmäßig 0s, und ein 0s-Übergang ist sofort — der Effekt wird schlicht nicht animiert. Gib daher immer eine Dauer an.
Mehrere Eigenschaften animieren
Um mehr als eine Eigenschaft zu übergehen, werden die einzelnen Angaben durch ein Komma getrennt. Jede Eigenschaft kann eine eigene Dauer, Zeitfunktion und Verzögerung haben:
.box {
transition: left 1s ease-in-out,
background-color 1s ease-out 1s;
}Du kannst auch das Schlüsselwort all verwenden, um jede animierbare Eigenschaft zu übergehen, die sich ändert — allerdings ist es in der Regel effizienter und vorhersehbarer, Eigenschaften explizit aufzulisten.
transition: all 0.3s ease;Der Wert none ist gültig und deaktiviert Übergänge für die angegebenen Eigenschaften.
Einen Übergang auslösen
Ein Übergang tut von sich aus nichts — er läuft nur, wenn sich eine animierbare Eigenschaft zwischen zwei Zuständen ändert. Häufige Auslöser sind:
- Pseudo-Klassen wie :hover, :focus oder :active.
- Das Umschalten einer Klasse per JavaScript (
element.classList.toggle('open')). - Inline-Stiländerungen per Skript (
element.style.opacity = 0).
Definiere den Übergang im Basis-Zustand des Elements (Ruhezustand), nicht in der :hover-Regel. So wird die Animation sowohl beim Einschalten als auch beim Zurückschalten des Zustands abgespielt.
Vendor-Präfixe wie -webkit-, -moz- und -o- sind veraltet und für moderne Browser in der Regel nicht erforderlich.
| Initial Value | all 0s ease 0s |
|---|---|
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | Object.style.transition = "all 3s"; |
Syntax
Syntax der CSS transition-Eigenschaft
transition: transition-property | transition-duration | transition-timing-function | transition-delay | initial | inherit;Beispiel der transition-Eigenschaft mit der :active-Pseudo-Klasse:
Beispiel der CSS transition-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 100px;
background: #8ebf42;
transition: width 2s;
}
div:active {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<p>Click and hold to see the transition effect.</p>
<div></div>
</body>
</html>Beispiel der transition-Eigenschaft mit der :hover-Pseudo-Klasse:
Beispiel der CSS transition-Eigenschaft mit der :hover-Pseudo-Klasse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.element {
padding: 20px;
width: 50px;
height: 50px;
left: 0;
background-color: #8ebf42;
position: relative;
transition: left 1s ease-in-out, background-color 1s ease-out 1s;
}
.example:hover .element {
left: 400px;
background-color: #1c87c9;
}
.element-2 {
transition: none;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<div class="example">
<p>Hover over the container to see the transition effect.</p>
<div class="element element-1"></div>
<p>No transition:</p>
<div class="element element-2"></div>
</div>
</body>
</html>Wissenswertes
- Nur animierbare Eigenschaften lassen sich übergehen. Numerische Eigenschaften und Farbeigenschaften (
width,opacity,color,transform) werden animiert; Eigenschaften wiedisplayoderfont-familywechseln sofort. auto-Werte vermeiden. Ein Übergang zwischen einem festen Wert undheight: autowird nicht animiert, da der Browser die Zwischenwerte nicht berechnen kann. Verwende stattdessenmax-heightodertransform: scaleY().- Performance.
transformundopacitysind die kostengünstigsten Eigenschaften für Animationen, da sie kein Layout oder Paint auslösen. Bevorzuge sie gegenüber der Animation vonleft/topoderwidth/height, wenn möglich. - Transitions vs. Animationen. Verwende
transitionfür einfache A-zu-B-Zustandsänderungen; greife auf animation mit@keyframeszurück, wenn du Schleifen, mehrere Schritte oder eigenständig startende Bewegungen benötigst.
Werte
| Wert | Beschreibung |
|---|---|
| transition-property | Gibt die Namen der Eigenschaften für den Übergang an. |
| transition-duration | Gibt die Dauer der Übergangsanimation an. |
| transition-timing-function | Gibt die Geschwindigkeit über die Zeit eines Objekts an, das von einem Wert zum anderen übergeleitet wird. |
| transition-delay | Gibt an, wie lange gewartet wird, bevor ein Übergangseffekt animiert wird. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |