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…