SVG Animation

SVG Animation

SVG Animation 1167 792 Adrian Bawidamann

Wir animieren unser Logo

Wissen / Tools:

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:

–> –>

Informatik – einfach, zuverlässig, innovativ

Zeiten: Da, wenn Sie uns brauchen. (Termin nach Vereinbarung)
Adresse: Schützengasse 28, 9410 Heiden, Schweiz
E-Mail: info@ab-it.ch
Telefon: +41 79 459 43 39

Open chat
1
Herzlich Willkommen bei der AB-IT 👋🏼
Wie können wir Ihnen helfen?
Powered by