Introduction

Aujourd'hui, je vais vous expliquer comment créer une animation. Nous verrons toutes les propriétés d'animation nécessaires dans cet article. Vous pouvez obtenir le code sur mon github. Alors, commençons!!

Animation

Les animations sont la propriété utilisée pour améliorer l'apparence du site Web. Cela donne une belle interférence à l'utilisateur et est également utilisé pour montrer aux gens l'objectif du site Web.

Une animation de base

Première animation : Changer la couleur d'un carré

Square

Ici, je fais un carré de couleur bleue et je lui donne ensuite quelques styles. Vous pouvez prendre n’importe quelle couleur !

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

Nous allons maintenant créer une animation.

Étape 1 : Créer une animation @keyframes

Pour créer une animation, vous devez définir @keyframes. Il contient les styles que vous souhaitez donner à votre élément à un moment donné et vous devez ensuite lui donner un nom. Dans mon cas, je change la couleur du carré. Donc, je lui donne un nom de couleur. Maintenant, vous pouvez écrire des @keyframes en deux types comme

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

Si vous souhaitez effectuer une animation comportant deux étapes, vous pouvez utiliser aller et venir. Ou vous pouvez le faire en utilisant une valeur en pourcentage comme

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

Les valeurs en pourcentage sont utilisées lorsque vous devez effectuer plusieurs tâches dans l'animation, mais vous pouvez utiliser les deux ! J'utilise généralement une valeur en pourcentage pour une animation

Étape 2 : Définir la propriété d'animation sur le carré.

Maintenant, nous allons animer la propriété sur la place. Pour cela, vous devez connaître les propriétés de l’animation. Je vais vous citer ceux qui sont le plus utilisés :

• animation-name - Il est utilisé pour indiquer au navigateur quelles @keyframes vous souhaitez utiliser. Dans mon cas, mon nom @keyframes est color.

• animation-duration - Il est utilisé pour indiquer dans combien de temps l'animation doit être terminée.

• animation-iteration-count - Il est utilisé pour indiquer combien de fois il doit s'exécuter.

Vous pouvez en savoir plus sur l'animation sur w3school ou sur n'importe quel autre site Web. Maintenant, nous allons utiliser la propriété animation mais nous l'écrirons sur une seule ligne comme ceci :

    animation: color 4s infinite;

Il y a 7 propriétés en animation en Css. Pour utiliser la propriété d'animation sur une seule ligne, j'écris d'abord le nom de l'animation qui est la couleur, puis la durée de l'animation qui est de 4 s dans mon cas, puis je définis le nombre d'itérations d'animation sur infini. Si vous souhaitez utiliser l'animation une seule fois, vous pouvez la définir sur 1 . Vous pouvez également définir vous-même les valeurs de la propriété d'animation.

Maintenant, si vous voyez votre carré, il changera de couleur encore et encore ! Maintenant, nous allons faire bouger le carré tout en changeant la couleur.

Deuxième animation : Déplacer le carré en changeant la couleur !

Pour cela, j'utiliserai le même carré et je ferai un autre @keyframes pour cela. Nous utiliserons les mêmes étapes qu'avant

Étape 1 : Créer une animation @keyframes

@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);
    }
}

Ici, je fais une @keyframes avec le nom move et j'utilise trois étapes pour cette animation. J'ai d'abord défini la gauche sur 0px et une couleur d'arrière-plan. Ensuite, à 50%, je règle la gauche sur 300 px et change la couleur d'arrière-plan et enfin, je règle à nouveau la gauche sur 0 px, pour qu'elle vienne en première position.

Étape 2 : Définir la propriété d'animation sur le carré

    animation: move 4s infinite;

Ici, j'ai défini le nom de l'animation pour qu'il se déplace, puis la durée de l'animation sur 4 s et le nombre d'itérations d'animation sur infini. Encore une fois, vous pouvez définir la valeur de l'animation selon votre choix. Et n'oubliez pas non plus de commenter la première propriété de l'animation, sinon les choses pourraient mal tourner !

Conclusion

Comme le post est déjà trop long nous le continuerons sur un autre post. Pour l’instant, c’est suffisant pour aujourd’hui. J'espère que vous le comprenez. Je fais de mon mieux pour raconter tout ce qui concerne l'animation. Et dites-moi aussi dans les commentaires sur quel sujet je devrais écrire mon prochain article. Merci pour la lecture!