Wie erstelle ich eine Animation in CSS?

Einführung

Heute werde ich Ihnen erklären, wie man Animationen erstellt. In diesem Beitrag werden wir alle notwendigen Animationseigenschaften sehen. Sie können den Code auf meinem Github erhalten. Also fangen wir an!!

Animation

Animationen sind die Eigenschaft, das Aussehen der Website zu verbessern. Es sorgt für eine nette Einbindung des Benutzers und dient auch dazu, den Leuten das Ziel der Website zu zeigen.

Eine einfache Animation

Erste Animation: Ändern der Farbe eines Quadrats

<div id="square">Square</div>

Hier mache ich ein Quadrat in blauer Farbe und gebe ihm dann einige Stile. Du kannst jede Farbe nehmen!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

Jetzt erstellen wir eine Animation.

Schritt 1: Animation @keyframes erstellen

Um eine Animation zu erstellen, müssen Sie @keyframes festlegen. Es enthält die Stile, die Sie Ihrem Element zu einem bestimmten Zeitpunkt geben möchten, und dann müssen Sie ihm einen Namen geben. In meinem Fall ändere ich die Farbe des Quadrats. Also gebe ich ihm einen Namen Farbe. Jetzt können Sie @keyframes in zwei Schriftarten schreiben:

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

Wenn Sie eine Animation mit zwei Schritten durchführen möchten, können Sie „hin“ und „von“ verwenden. Oder Sie können es tun, indem Sie einen Prozentwert wie
verwenden

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

Prozentwerte werden verwendet, wenn Sie in der Animation mehrere Aufgaben ausführen müssen, aber Sie können beide verwenden! Normalerweise verwende ich einen Prozentwert für eine Animation

Schritt 2: Animationseigenschaft auf dem Quadrat festlegen.

Jetzt werden wir die Immobilie auf dem Platz beleben. Dazu müssen Sie die Eigenschaften von Animationen kennen. Ich werde Ihnen diejenigen nennen, die am häufigsten verwendet werden:

• Animationsname – Wird verwendet, um dem Browser mitzuteilen, welche @keyframes Sie verwenden möchten. In meinem Fall ist mein @keyframes-Name color.

• Animationsdauer – Hier wird angegeben, in welcher Zeit die Animation abgeschlossen sein soll.

• Animation-Iteration-Count – Wird verwendet, um anzugeben, wie oft es ausgeführt werden soll.

Mehr über Animation erfahren Sie auf w3school oder auf jeder anderen Website. Jetzt verwenden wir die Animationseigenschaft, schreiben sie jedoch in einer einzigen Zeile wie folgt:

    animation: color 4s infinite;

Es gibt 7 Eigenschaften in der Animation in CSS. Um die Animationseigenschaft in einer einzelnen Zeile zu verwenden, schreibe ich zuerst den Animationsnamen, der Farbe ist, dann die Animationsdauer, die in meinem Fall 4 Sekunden beträgt, und setze dann die Anzahl der Animationsiterationen auf unendlich. Wenn Sie die Animation nur einmal verwenden möchten, können Sie sie auf 1 setzen. Sie können die Werte der Animationseigenschaft auch selbst festlegen.

Wenn Sie nun Ihr Quadrat sehen, wird es immer wieder seine Farbe ändern! Jetzt bewegen wir das Quadrat und ändern gleichzeitig die Farbe.

Zweite Animation: Das Quadrat verschieben und dabei die Farbe ändern!

Dafür werde ich dasselbe Quadrat verwenden und dafür ein weiteres @keyframes erstellen. Wir werden die gleichen Schritte wie zuvor verwenden

Schritt 1: Animation @keyframes erstellen

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

Hier erstelle ich ein @keyframes mit dem Namen move und verwende drei Schritte für diese Animation. Zuerst habe ich links auf 0px und eine Hintergrundfarbe gesetzt. Dann setze ich bei 50 % links auf 300 Pixel und ändere die Hintergrundfarbe und zuletzt setze ich links wieder auf 0 Pixel, damit es an der ersten Position erscheint.

Schritt 2: Animationseigenschaft auf dem Quadrat festlegen

    animation: move 4s infinite;

Hier stelle ich den Animationsnamen auf „Verschieben“, dann die Animationsdauer auf 4 Sekunden und die Anzahl der Animationsiterationen auf „Unendlich“. Auch hier können Sie den Animationswert nach Ihren Wünschen einstellen. Und vergessen Sie auch nicht, die erste Animationseigenschaft zu kommentieren, sonst kann etwas schief gehen!

Abschluss

Da der Beitrag bereits zu lang ist, werden wir ihn in einem anderen Beitrag fortsetzen. Im Moment reicht es für heute. Ich hoffe, du verstehst es. Ich versuche mein Bestes, alles über Animation zu erzählen. Und sagt mir auch in den Kommentaren, zu welchem ​​Thema ich meinen nächsten Beitrag schreiben soll. Vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Animation in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!