Wir animieren unser Logo
Wissen / Tools:
- HTML / CSS
- SVG-Datei
- Codepen

Kombiniert mit etwas CSS, für jede „Ring-Stufe“ definieren wir eine eigene Klasse, ausserdem 2 Keyframes, welche im Uhrzeigersinn und im Gegenuhrzeigersinn rortieren.
Wichtig ist der transform-origin:center;
damit die Kreisausschnitte ausgehend vom Zentrum der Grafik rortieren.
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
width: 20%;
height: 20%;
margin: 0 auto;
}
.lvl1 {
animation: spin 3s infinite;
transform-origin:center;
}
.lvl2 {
animation: spinInv 2s infinite linear;
animation-delay: 0.5s;
animation-duration: 3s;
transform-origin:center;
}
.lvl3 {
animation: spin 2s infinite;
animation-delay: 0.5s;
animation-duration: 2.8s;
transform-origin:center;
}
.lvl4 {
animation: spin 3s infinite;
animation-delay: 1s;
transform-origin:center;
}
@keyframes spin {
from{
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}
@keyframes spinInv {
from{
transform: rotate(360deg);
} to {
transform: rotate(0deg);
}
}
Resultat: