CSS: Übergänge (Transitions)

Mit CSS3 lassen sich dynamische Übergänge zwischen verschiedenen Werten einzelner Eigenschaften realisieren, die beispielsweise beim Überfahren eines Elements mit dem Mauszeiger ausgelöst werden.

Dauer des Übergangs – transition-duration

Mit transition-duration wird die Dauer des Übergangs festgelegt. Wird diese Eigenschaft nicht angegeben oder ist ihr Wert 0, so erfolgt die Änderung sofort ohne Übergang.

<style>
  #transdiv { background-color:white; padding:10px; }
  #transdiv img {
    position:relative;
    left:0;
    width:20px;
    height:20px;
    background-color:blue;
    border:20px solid black;
    border-radius:0px;
    transition-duration:.9s;
  }
  #transdiv:hover img {
    left:200px;
    width:100px;
    height:100px;
    background-color:red;
    border:5px solid green;
    border-radius:30px;
  }
</style>

<div id='transdiv'>
  <img src='img/spacer.png' alt=''>
</div>

Beim Überfahren der weißen Fläche mit dem Mauszeiger wird der Übergang ausgelöst.

Zeitfunktion des Übergangs – transition-timing-function

Mit transition-timing-function wird der Verlauf des Übergangs festgelegt. Wird diese Eigenschaft nicht angegeben, so entspricht der Verlauf dem Wert ease. Es stehen folgende Werte zur Verfügung:

• linear – konstante Geschwindigkeit
• ease – Verzögerung bei Start und Ende
• ease-in-out – wie ease mit höherer Verzögerung
• ease-in – höhere Verzögerung nur am Anfang
• ease-out – höhere Verzögerung nur am Ende
• steps(n) – Verlauf in n Stufen
• step-start – Übergang ohne Verlauf sofort
• step-end – Übergang ohne Verlauf erst nach Ablauf der Zeit
• cubic-bezier(x1,y1,x2,y2) – Verlauf entsprechend einer kubischen Bézierkurve

<style>
  #transdiv { background-color:white; padding:10px; }
  #transdiv img {
    position:relative;
    left:0;
    width:20px;
    height:20px;
    background-color:blue;
    border:20px solid black;
    border-radius:0px;
    transition-duration:.9s;
    transition-timing-function:steps(4, start);
  }
  #transdiv:hover img {
    left:200px;
    width:100px;
    height:100px;
    background-color:red;
    border:5px solid green;
    border-radius:30px;
  }
</style>

<div id='transdiv'>
  <img src='img/spacer.png' alt=''>
</div>

Beim Überfahren der weißen Fläche mit dem Mauszeiger wird der Übergang ausgelöst.

Eigenschaft des Übergangs – transition-property

Mit transition-property werden die Eigenschaften festgelegt, auf die ein Übergang angewendet werden soll. Grundsätzlich können das alle Eigenschaften sein, für die numerische Zwischenstufen errechnet werden können, einschließlich Farben.

Wird diese Eigenschaft nicht angegeben, so wird der Übergang auf alle Eigenschaften angewendet. Werden nur bestimmte Eigenschaften angegeben, so erfolgt der Übergang für die übrigen Eigenschaften sofort ohne Verlauf.

<style>
  #transdiv { background-color:white; padding:10px; }
  #transdiv img {
    position:relative;
    left:0;
    width:20px;
    height:20px;
    background-color:blue;
    border:20px solid black;
    border-radius:0px;
    transition-duration:.9s;
    transition-property:left,border-radius;
  }
  #transdiv:hover img {
    left:200px;
    width:100px;
    height:100px;
    background-color:red;
    border:5px solid green;
    border-radius:30px;
  }
</style>

<div id='transdiv'>
  <img src='img/spacer.png' alt=''>
</div>

Beim Überfahren der weißen Fläche mit dem Mauszeiger wird der Übergang ausgelöst.

Verzögerung des Übergangs – transition-delay

Mit transition-delay kann die zeitliche Verzögerung angegeben werden, mit der ein Übergang beginnt. Der Wert der Verzögerung kann auch negativ sein.

<style>
  #transdiv { background-color:white; padding:10px; }
  #transdiv img {
    position:relative;
    left:0;
    width:20px;
    height:20px;
    background-color:blue;
    border:20px solid black;
    border-radius:0px;
    transition-duration:.9s;
    transition-delay:.45s;
  }
  #transdiv:hover img {
    left:200px;
    width:100px;
    height:100px;
    background-color:red;
    border:5px solid green;
    border-radius:30px;
  }
</style>

<div id='transdiv'>
  <img src='img/spacer.png' alt=''>
</div>

Beim Überfahren der weißen Fläche mit dem Mauszeiger wird der Übergang ausgelöst.

Kurzform der Eigenschaft – transition

Mit transition lassen die möglichen Eigenschaften zusammenfassen. Die Reihenfolge ist hier transition-property, transition-duration, transition-timing-function und transition-delay. Es müssen nicht alle Eigenschaften angegeben werden.

<style>
  #transdiv { background-color:white; padding:10px; }
  #transdiv img {
    position:relative;
    left:0;
    width:20px;
    height:20px;
    background-color:blue;
    border:20px solid black;
    border-radius:0px;
    transition:all .9s linear;
  }
  #transdiv:hover img {
    left:200px;
    width:100px;
    height:100px;
    background-color:red;
    border:5px solid green;
    border-radius:30px;
  }
</style>

<div id='transdiv'>
  <img src='img/spacer.png' alt=''>
</div>

Beim Überfahren der weißen Fläche mit dem Mauszeiger wird der Übergang ausgelöst.