Nach der Transformation geht es im Webdesign-Workshop mit der CSS Eigenschaft Transition weiter…

Transition – Was ist das denn?

Mit den Transitions lassen sich per CSS interessante Übergangseffekte realisieren. Mouseovers und Farb- oder Objektänderungen für ausgewählte Elemente der Webseite…

Für die folgenden Experimente macht es Sinn eine neue Datei zu erstellen (Kopiervorlage nutzen) und dann wieder eine Box erzeugen…

<p>

<div id=”box1″>

</div>

</p>

Transition 1 mit Hover-Effekt:

Per CSS kommt dann die Transition dazu:

#box1 {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;

}

#box1:hover {

width: 300px;

height: 100px;

background: red;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;

}

Transition 2 mit Hover und Farbwechsel:

Für eine Box 2 kann folgendes CSS probiert werden…:

#box2 {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;

}

#box2:hover {

width: 300px;

height: 100px;

background: green;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;

transition-delay: 1s;

}

Die Boxen verändern beim Mouse-Over ihre Größe. Die zweite Box sogar die Farbe und das mit Zeitverzögerung…