Bitte warten...

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.

Code kopieren
<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

Code kopieren
<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.

Code kopieren
<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.

Code kopieren
<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.

Code kopieren
<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.