Elemente in Websiten rotieren zu lassen ist gar nicht so schwer. Dazu vergibt man zunächst dem Element einen frei wählbaren Klassennamen.
Danach fügt man dieser Klasse per CSS eine Bewegung hinzu:
animation: rotating 45s linear infinite;
rotating ist dabei die Bewegung, die in Keyframes beschrieben wird.
from { } to {}
Danach folgt die Länge der Animation: 45s (In unserem Beispiel 45 Sekunden)
linear besagt, dass es sich um eine lineare Bewegung handelt.
infinite bedeutet in diesem Fall eine unendlich laufende Bewegung.
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 45s linear infinite;
-moz-animation: rotating 45s linear infinite;
-ms-animation: rotating 45s linear infinite;
-o-animation: rotating 45s linear infinite;
animation: rotating 45s linear infinite;
}
