---
title: transition-property
slug: Web/CSS/transition-property
tags:
  - CSS
  - CSS Animationen
  - CSS Übergänge
  - Reference
  - Référence(2)
translation_of: Web/CSS/transition-property
---
<div>{{CSSRef("CSS Transitions")}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die CSS Eigenschaft <code>transition-property</code> wird verwendet, um den <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Übergangseffekte</a> auf bestimmte CSS Eigenschaften anzuwenden.</p>

<div class="note"><strong>Hinweis:</strong> Die Eigenschaften, die animiert werden können, könnten sich unter Umständen ändern. Eigenschaften, die bis jetzt noch nicht animierbar sind, sollten nicht angegeben werden, da sie vielleicht eines Tages animierbar sein werden, und es dann unerwartete Auswirkungen haben könnte.</div>

<p>Wird eine Kurzform einer CSS Eigenschaft (zum Beispiel {{cssxref("background")}}) angegeben, so werden alle Untereigenschaften (zum Beispiel {{cssxref("background-color")}}), wenn diese animierbar sind, ebenfalls animiert.</p>

<div>{{cssinfo}}</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">/* Schlüsselwortwerte */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;

/* Globale Werte */
transition-property: inherit;
transition-property: initial;
transition-property: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>Keine Eigenschaften werden animiert.</dd>
 <dt><code>all</code></dt>
 <dd>An allen animierbaren Eigenschaften werden Übergangsanimationen angewant.</dd>
 <dt><code>IDENT</code></dt>
 <dd>Zeichenkette, die eine Eigenschaft bezeichnet, an der bei einer Änderung des Wertes der jeweiligen Eigenschaft, eine Übergangsanimation angewant werden soll. Die Groß- und Kleinschreibung des Eingenschaftsnamen wird ignoriert. Ein Eigenschaftsname darf nur alphabetische (<code>a</code> bis <code>z)</code> und numerische (<code>0</code> bis <code>9) Zeichen</code>, sowie Unter- (<code>_</code>) und Bindestriche(<code>-</code>) erhalten. Das erste Zeichen, das kein Bindestrich ist, muss ein alphabetisches Zeichen sein (Es darf keine Zahl am Anfang stehen, auch wenn kein Bindestrich vorangestellt wurde). Der Eigenschaftsname darf ebenfalls nicht mit zwei Bindestrichen beginnen.</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<p>Es gibt mehrere Beispiele von CSS Übergängen im <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Animationen</a> Hauptartikel.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Komentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#transition-property', 'transition-property')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Initiale definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.properties.transition-property")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/Web/Guide/CSS/Using_CSS_transitions">CSS Animationen nutzen</a></li>
 <li>{{domxref("TransitionEvent")}}</li>
</ul>