Wie macht man mit CSS eine kreisförmige Animation?

Also dass ein Objekt im Kreis oder in einer Spirale fliegt.

Answer 1

[regex9]

Für die Animation kannst du einen Keyframe definieren, der dann von einem animation-Property referenziert wird. Der Bezugspunkt für die Rotation wird mit transform-origin gesetzt. Für die Drehung selbst gibt es die transform-Funktion rotate.

Beispiel:

.some-element {
  animation: spin 4s linear infinite;
  position: absolute;
  transform-origin: 50px 50px;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

HTML:

<span class="some-element">Hello</span>

Comments

[MmmCheesecake]

Hallo. Danke. Ich möchte, dass sich das Objekt um die Mitte dreht, so ähnlich wie die Erde um die Sonne herum rotiert. Also wie so eine Planetenlaufbahn. Könntest du mir da gute Größen dafür geben mit dem Bezugspunkt, ich check das noch nicht ganz. Außerdem: wie mache ich Ellipsen oder Spiralen als Laufbahn?

[regex9]

@MmmCheesecake

Der Bezugspunkt (transform-origin) ist der zentrale Punkt, um den sich das Element dreht. Welche Koordinaten/Abstände für dich passend sind, musst du selbst ausprobieren.

Für eine ovale Laufbahn könntest du das Element bei 90° und 270° auf der x-Achse etwas verschieben. Du brauchst folglich mehr Schritte für den Keyframe.

Beispiel:

@keyframes spin {
  0% {
    transform: rotate(0deg) translateX(0px);
  }
  25% {
    transform: rotate(90deg) translateX(20px);
  }
  50% {
    transform: rotate(180deg) translateX(0px);
  }
  75% {
    transform: rotate(270deg) translateX(20px);
  }
  100% {
    transform: rotate(360deg) translateX(0px);
  }
}

Für eine logarithmische Spirale müsstest du dir die Interpolationspunkte berechnen (siehe hier). Dazu wäre es wohl besser, den Keyframe in noch mehr Schritte zu unterteilen. Du kannst das wie bei den obigen Fällen statisch machen oder du berechnest die Werte dynamisch mit JavaScript. Ana Tudor macht Letzteres in diesem Video vor.