Utiliser @keyframes pour créer des animations en CSS3, expliqué avec des exemples

Les propriétés animées peuvent changer progressivement d'une valeur à une autre, comme la taille, la quantité, le pourcentage et la couleur. Utilisez @keyframes pour créer des animations en remplaçant progressivement un paramètre de style CSS par un autre. L'animation est également beaucoup utilisée dans le travail. Ensuite, je présenterai comment utiliser l'animation.

1. Règles de syntaxe @keyframes
Pendant le processus d'animation, le style CSS peut être modifié plusieurs fois. Spécifiez quand un changement se produit à l'aide de %, ou des mots-clés « de » et « à », qui sont identiques à 0 % à 100 %. 0% correspond au démarrage de l'animation, 100% correspond à la fin de l'animation. Pour une meilleure prise en charge du navigateur, les sélecteurs doivent toujours être définis sur 0 % et 100 %.

@keyframes est une animation, qui peut être comprise comme un groupe composé de plusieurs transformations.
Syntaxe :
@nom de l'animation keyframes{
de{ css1}
à{ css2 }
}

@nom de l'animation keyframes{
0 % {css1}
50% {css2>
100% {css3}
>
Remarque : utilisez l'attribut d'animation pour contrôler l'apparence de l'animation, et utilisez également le sélecteur pour lier l'animation.

2. valeur de l'attribut d'animation

Utiliser l'animation lors de l'appel de cette animation se compose de six attributs :

animation-name spécifie la clé à lier au sélecteur. de l'image
animation-duration L'animation spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer
animation-timing-function Définit la façon dont l'animation terminera un cycle
animation-delay Définit l'intervalle de retard avant l'animation start
animation -iteration-count Définir le nombre de fois que l'animation est jouée
animation-direction Spécifier si l'animation doit être jouée à l'envers à tour de rôle
animation: animation name Le nombre de lectures retardées au début de la courbe temps vitesse Jouez à l'envers dans les tours
Prenons un exemple :

Laissez le carré passer du coin supérieur gauche au coin supérieur droit, puis au coin inférieur droit See More dans le coin inférieur gauche et enfin de retour dans le coin supérieur gauche, et la couleur changera en conséquence

div{animation:mymove 5s infinite;
 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
}

Le contenu ci-dessus explique comment utiliser l'animation. Vous devez toujours le faire vous-même, frapper davantage et. essayez différents effets !

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!