Comment faire de l'animation en CSS ?

Introduction

Aujourd'hui, je vais vous expliquer comment réaliser 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é

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

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

Maintenant, nous allons faire 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 @keyframes en deux types comme

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

Si vous souhaitez réaliser 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éfinissez 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 couleur.

• animation-durée - 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 apprendre davantage 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 ça. 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 donc 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 d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!