CSS3 erstellt eine Webanimation, um einen springenden Balleffekt zu erzielen

Grundlegende Vorbereitung

Für diese Implementierung benötigen wir ein einfaches div mit dem Klassennamen ball:

HTML Quelltext:

<div Klasse="Ball"></div>

Wir verwenden das Flexbox-Layout, um den Ball in die Mitte der Seite zu platzieren, mit einer Größe von 100 x 100 Pixel und einer orangefarbenen Hintergrundfarbe.

CSS Code:

Körper {
Anzeige: flex; /* Flex-Layout verwenden */
justify-content: center; /* Horizontal zentrieren */
}
.ball {
Breite: 100px;
Höhe: 100px;
border-radius: 50%; /* Mache aus dem Quadrat einen Kreis */
Hintergrundfarbe: #FF5722; /* Setze die Farbe auf Orange */
}

Erstellen von Keyframes

In CSS-Animationen werden Keyframes verwendet, damit wir die volle Kontrolle über die Animation haben. Das Erstellen eines Keyframe-Stils ist sehr einfach. Wir verwenden das Schlüsselwort @keyframes gefolgt vom Namen der Animation:

CSS Code:

@keyframes NameDerAnimation {
/* Bezeichnung */
}

In diesem Beispiel nennen wir den Keyframe „Bounce“. Verwenden Sie in Keyframe die Schlüsselwörter „from“ und „to“, um die CSS-Stile für die Start- und Endpunkte der Animation anzugeben.

CSS Code:

@keyframes hüpfen {
von { /* start */ }
bis { /* Ende */ }
}

Einfach, nicht wahr? Als letzten Schritt können wir CSS-Stile für unsere Start- und Endpunkte hinzufügen. Um den Sprungeffekt zu erzeugen, ändern wir einfach die Position des Balls. Mit Transform können wir die Koordinaten eines gegebenen Elements ändern. Hier ist das letzte Keyframe:

CSS Code:

@keyframes hüpfen {
von { transform: translate3d(0, 0, 0); }
zu { transform: translate3d(0, 200px, 0); }
}

Wir verwenden transform, um den Ball entlang der dreidimensionalen Achse zu verschieben. Die Funktion translate3D erfordert drei Eingabeparameter, nämlich (x, y, z). Da der Ball auf und ab springen soll, müssen wir ihn nur entlang der y-Achse verschieben. Daher beträgt der Y-Wert des Endpunkts der Animation (also des Stils in „zu“) 200 Pixel.

Keyframe ausführen

Nachdem der @keyframe erstellt wurde, ist es Zeit, ihn einzusetzen! Gehen Sie zurück zum .ball{}-CSS und fügen Sie die folgende Codezeile hinzu:

CSS Code:

.ball {
/* … */
Animation: Abpraller 0,5 s;
Animationsrichtung: alternativ;
Anzahl der Animationsiterationen: unendlich;
}

Erklären Sie diese drei Codezeilen:

Sagen Sie dem Ballelement, dass es mithilfe unserer Keyframe-Regeln springen soll. Stellen Sie die Dauer der gesamten Animation auf 0,5 Sekunden ein.

Nach Abschluss wird die Animation in die entgegengesetzte Richtung ausgeführt (umgekehrt).

Führen Sie die Animation unbegrenzt oft aus.

Bisher großartig. Das kommt unserem Wunsch schon sehr nahe, ist aber noch nicht perfekt:

Es sieht nicht wie ein springender Ball aus. Das liegt daran, dass wir für die Animation keine Geschwindigkeitskurve festgelegt haben und sie daher standardmäßig auf „Ease“ eingestellt ist. Dies bedeutet, dass die Animation langsam beginnt, in der Mitte schneller wird und gegen Ende wieder langsamer wird. Für einen springenden Ball ist das leider nicht optimal. Glücklicherweise können wir diese Geschwindigkeitskurve mithilfe der Mathematik anpassen!

Ohne zu sehr ins Detail zu gehen, können Sie Bézierkurven verwenden, um benutzerdefinierte Animationszeiten festzulegen. Hier ist der angehängte Code:

CSS Code:

.ball {
/* … */
Animation: Sprung 0,5 s kubisch-bézier(.5,0.05,1,.5);
}

Dies ist natürlich der einfachste Animationseffekt, der mit CSS-Animationen und Keyframes erstellt wurde.

Zusammenfassen

Oben habe ich Ihnen gezeigt, wie Sie mit CSS3 Webanimationen erstellen und so den Effekt von springenden Bällen erzielen können. Ich hoffe, dass es Ihnen weiterhilft. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!