Weblog

Animationen mit CSS: transform & transition

Früher brauchte es schon JavaScript, um etwas Bewegung auf der Webseite ins Spiel zu bringen. Heute kann das aber schon einfaches CSS. Zum Beispiel mit Hilfe von transform.

Mit Hilfe von transform lassen sich etwa Bilder leicht davon überzeugen in einen anderen Zustand überzugehen, etwas sich um ein paar Grade zu verschieben oder gar plötzlich zu wachsen. Ein paar Beispiele habe ich auf dieser Seite angezeigt.

Beispiel 1 arbeitet mit rotate(x), dem man in den Klammern einfach die Anzahl der Grade eingeben kann, in der sich das Bild im Uhrzeigersinn dreht. Beispiel 2 wiederum funktioniert mit Hilfe von translate(x,y) mit dessen Hilfe man das Bild um eine gewisse Pixelzahl nach rechts und dann nach unten verschiebt. Im 3. Beispiel kommt scale(x,y) zum Einsatz, das das Bild im eigegebenen Verhältnis vergrößert. skew(x,y) zeigt das Bild in Beispiel 4 schließlich verdreht aus. Damit man den Effekt auch sieht, habe ich das Bild eingebunden und erst wenn die Maus darüber fährt, wird mittels :hover der eigentliche Effekt ausgelöst:

.rotate:hover {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   }

.translate:hover {
    -webkit-transform: translate(20px,10px);
    transform: translate(20px,10px);
    }

.scale:hover {
    -webkit-transform:scale(2,2);
    transform:scale(2,2);
    }

.skew:hover {
    -webkit-transform:skew(10deg,10deg);
    transform:skew(10deg,10deg);
    }

Jetzt ist dieser Effekt aber natürlich ein bisschen plötzlich, aber mittels transform bekommt man auch einen sauberen Übergang hin. Beispiel 5 zeigt das sehr schön, in dem sich das Bild dort nicht von jetzt auf gleich vergrößert, sondern in gewisser Weise wächst. Dazu muss man aber den Urzustand des Bildes eine CSS-Anweisung geben, in diesem Fall wird ein Übergang von 4 Sekunden angegeben.

.scale-transition {
    transition: 4s;
    }

.scale-transition:hover {
    -webkit-transform:scale(2,2);
    transform:scale(2,2);
    }

transform ist natürlich noch zu anderen Dingen gut, etwa der Simulation von Wahlbalken, sobald man mit der Maus darauf kommt. Aber davon später mehr.

Das ganze Beispiel samt Quellcode findet ihr hier.

Teilen macht Freude.