decocode decocode deco    

Ü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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type='text/css'>
  #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

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type='text/css'>
  #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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type='text/css'>
  #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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type='text/css'>
  #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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type='text/css'>
  #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.