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 lasst uns anfangen!!

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

Square

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 eine Namensfarbe. Jetzt können Sie @keyframes in zwei Typen schreiben, z. B.

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

Wenn Sie eine Animation ausführen möchten, die aus zwei Schritten besteht, können Sie „to“ und „from“ 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 Eigenschaft auf dem Platz animieren. Dazu müssen Sie die Eigenschaften von Animationen kennen. Ich werde Ihnen diejenigen nennen, die am häufigsten verwendet werden:

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

• animation-duration – Hiermit wird angegeben, in welcher Zeit die Animation abgeschlossen sein soll.

• animation-iteration-count – Wird verwendet, um anzugeben, wie oft es ausgeführt werden soll.

Sie können mehr über Animation auf w3school oder auf jeder anderen Website erfahren. 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 dabei die Farbe.

Zweite Animation: Bewegen Sie das Quadrat und ändern Sie dabei die Farbe!

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!