Wie können Sie CSS3-Animationen anstelle von JavaScript verwenden?

1 Was sind CSS3-Animationen?

CSS3-Animationen sind eine Reihe von Eigenschaften und Regeln, mit denen Sie reibungslose Übergänge zwischen verschiedenen Zuständen eines Elements erstellen können. Sie können die Dauer, das Timing, die Richtung, die Iteration und die Keyframes der Animation festlegen sowie Beschleunigungsfunktionen anwenden, um realistische und natürliche Effekte zu erzielen. Sie können auch den Befehl @Keyframes-Regel, um die Zwischenschritte der Animation zu definieren, z. B. die Start-, End- und Zwischenwerte der Eigenschaften, die Sie animieren möchten.

4 Wie drehe ich ein Element mit CSS3-Animationen um seine Mitte?

Sie können auch CSS3-Animationen verwenden, um ein Element um seinen Mittelpunkt oder einen anderen Punkt zu drehen. Dazu müssen Sie die transform-Eigenschaft des Elements mit der Funktion rotate animieren. Sie können z. B. den folgenden Code verwenden, um ein Element pro Sekunde um 360 Grad zu drehen:

.rotate {
  animation: rotate 1s infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}        

5 Wie transformiere ich die Form eines Elements mit CSS3-Animationen?

CSS3-Animationen können Ihnen auch dabei helfen, die Form eines Elements zu transformieren, z. B. zu skalieren, zu neigen oder zu verzerren. Dazu müssen Sie die Transformationseigenschaft des Elements animieren, indem Sie verschiedene Funktionen wie Skalierung, Neigung oder Matrix verwenden. Sie können z. B. den folgenden Code verwenden, um ein Element alle 4 Sekunden hoch- und herunterzuskalieren:

.scale {
  animation: scale 4s infinite;
}
@keyframes scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
}        

6 Wie kombiniere ich mehrere Animationen auf einem Element mit CSS3-Animationen?

Einer der Vorteile von CSS3-Animationen besteht darin, dass Sie mehrere Animationen auf einem Element kombinieren können, wodurch komplexere und interessantere Effekte entstehen. Dazu müssen Sie die animation-Eigenschaft mit mehreren Werten verwenden, die durch Kommas getrennt sind. Jeder Wert entspricht einer anderen Animation, und Sie können den Namen, die Dauer, das Timing und andere Parameter für jede Animation angeben. Sie können z. B. den folgenden Code verwenden, um eine Fade-, eine Slide- und eine Rotationsanimation für ein Element zu kombinieren:

.combo {
  animation: fade 3s infinite, slide 2s infinite, rotate 1s infinite;
}
@keyframes fade {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}