Rotationsanimation in CSS

Ob es darum geht, eine Schaltfläche zu verbessern, die Zeit beim Laden der Seite zu verkürzen oder einer Zielseite ein wenig zusätzliches Flair zu verleihen, die Animation ist effizient, um die Aufmerksamkeit der Leser zu erhalten und sie auf Ihrer Website zu begeistern.

Während es verschiedene Methoden gibt, animierte Visuals zu einer Webseite hinzuzufügen, ist eine der einfachsten die Verwendung von CSS-Animationen, die mehr als nur ein bisschen HTML- und CSS-Kenntnisse erfordern.

Wenn Sie CSS-Animationen in Ihrer Arbeit verwenden möchten, ist es gut, sich einige Beispiele erfolgreicher CSS-Animationen anzusehen, bevor Sie loslegen. Diese zusätzliche Studie kann Ihnen helfen, Ideen für Ihre Projekte zu sammeln, und Ihnen zeigen, was Sie mit dieser wichtigen Funktion tun können.

Sie benötigen drei Dinge, um eine CSS-Animation zu erstellen:

• Ein zu animierendes HTML-Element;
• Eine CSS-Regel, die die Animation mit diesem Element verbindet;
• Eine Reihe von Keyframes geben die Stile am Anfang und am Ende der Animation an.

Deklarationen wie Geschwindigkeit und Verzögerung können verwendet werden, um Ihre Animation weiter anzupassen. Sehen wir uns nun einige Beispiele für Rotationsanimationen in CSS an.

Verwenden Sie CSS-Animationen, um das Bild kontinuierlich zu drehen

In diesem Beispiel fügen wir dem Element, das wir drehen möchten, den CSS-Befehl hinzu. Sie können die 2s anpassen, um die Rotationsdauer zu verlangsamen oder zu beschleunigen und in der Animation um 360 Grad zu drehen.

Beispiel:

<img src="/img/DelftStack/logo.png" class="image_rotate" width="200" height="200" />

.image_rotate {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

Ausgabe: Das Bild wird um volle 360 ​​Grad gedreht.

Für das folgende Beispiel benötigen wir ein HTML-Markup, das ein Bild und einige Eigenschaften enthält. Wie Sie sehen, hat unser Bildelement drei Klassen: rotate, linear und infinite.

Jede Klasse benötigt ihren Deklarationsblock in unserem CSS. Drehen Sie in der Animation um 360 Grad und ändern Sie die 2s, um die Rotationslänge zu verlangsamen oder zu beschleunigen.

<img src="/img/DelftStack/logo.png" class="rotate linear infinite" width="200" height="200" />

.rotate {
    animation: rotation 4s;
}
.linear {
    animation-timing-function: linear;
}
.infinite {
    animation-iteration-count: infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

Ausgabe: Das Bild wird um volle 360 ​​Grad gedreht.