SVG Animation

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: