Comment créer des animations d'images clés CSS

Comment créer des animations d'images clés CSS

CSS donne aux développeurs la possibilité de donner vie à leurs pages Web à l'aide d'une animation d'images clés.





L'animation CSS est obtenue en modifiant l'état initial d'un élément HTML via ses diverses propriétés. Certaines propriétés CSS générales qui peuvent être animées incluent :



qu'est-ce que le bouton wps sur le routeur
  • Largeur
  • Hauteur
  • Position
  • Couleur
  • Opacité

Ces propriétés CSS générales sont manipulées par des éléments CSS spécifiques pour créer le résultat souhaité. Si vous avez déjà rencontré un élément animé sur une page Web, il est probable que l'élément ait été animé à l'aide d'une animation d'images clés.





Qu'est-ce qu'un élément d'images clés ?

Les élément d'images clés peut être utilisé sur un ou plusieurs éléments HTML auxquels il a accès. Il identifie un point spécifique dans l'état d'un élément et dicte l'apparence que cet élément doit avoir à ce moment.

Cela peut sembler beaucoup à digérer, mais c'est en fait assez simple. Les élément d'images clés a une structure assez simple qui peut être facilement comprise et ajustée pour s'adapter à toutes les exigences d'animation.



Exemple de structure d'images clés


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Supposons que vous vouliez animer un bouton rectangulaire vert en le transformant en un bouton rond bleu.

Dans les paramètres de la de section ci-dessus, vous devrez placer tout le style nécessaire pour que l'élément ressemble à un bouton rectangulaire vert, puis dans le à section, vous placerez toutes les exigences de style pour transformer ce bouton en un bouton rond bleu.



Si vous pensez, cela ne ressemble pas trop à une animation. Eh bien, c'est parce qu'un composant clé de tout ce processus n'a pas encore été introduit --- ce composant est la propriété d'animation.

La propriété d'animation

Les propriété d'animation possède un ensemble de sous-propriétés différentes ; ceux-ci sont utilisés en combinaison avec la structure d'images clés ci-dessus pour animer l'élément HTML souhaité.



Cependant, vous n'avez besoin de connaître que cinq de ces sous-propriétés et les valeurs qui leur sont associées, pour réaliser l'animation dans vos projets. Ces propriétés sont appelées :

  • Nom de l'animation
  • Durée de l'animation
  • Fonction de synchronisation d'animation
  • Retard d'animation
  • Nombre d'itérations d'animation

Utiliser l'animation sur une page Web

En utilisant le scénario ci-dessus, l'objectif est de créer un bouton animé.

Exemple d'animation de bouton







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


La section animation du code ci-dessus contient les cinq sous-propriétés mentionnées précédemment. Chaque propriété a une fonction très distincte et, ensemble, elles fonctionnent pour animer tout élément HTML qu'elles sont conçues pour cibler.

Connexe: Comment cibler une partie d'une page Web à l'aide de sélecteurs CSS

La propriété Animation-name

Cette propriété est la propriété la plus importante de la liste. Sans le propriété nom-animation , vous n'auriez aucun identifiant à coller au élément d'images clés , rendant tout le code dans ses paramètres inutile.

Si vous avez oublié d'inclure une ou deux des autres sous-propriétés, vous pourriez toujours avoir une animation assez décente. Cependant, si vous avez oublié le propriété nom-animation vous n'auriez pas d'animation.

La propriété Animation-duration

Cette propriété est utilisée pour définir le temps qu'un élément animé doit prendre lors de la transition d'un état au suivant.

Dans l'exemple ci-dessus, le propriété animation-duration est réglé sur 5 secondes (5 s), de sorte que le bouton rectangulaire vert aura un total de 5 secondes avant de devenir complètement un bouton rond bleu.

La propriété Animation-delay

Cette propriété est importante pour une raison ; certaines pages Web peuvent mettre quelques secondes à se charger complètement (en raison de plusieurs facteurs différents). Alors le propriété de retard d'animation empêche l'animation de démarrer immédiatement au cas où la page Web prendrait un certain temps à se charger.

Dans l'exemple ci-dessus, le propriété de retard d'animation est défini sur 4s, ce qui signifie que l'animation ne commencera que 4 secondes après la visite de la page Web (ce qui donne à la page Web suffisamment de temps pour se charger avant le début de l'animation).

La propriété Animation-iteration-count

Cette propriété indique combien de fois l'élément animé doit passer d'un état au suivant. Les propriété animation-iteration-count prend des valeurs qui sont des mots et des nombres. La valeur numérique peut être comprise entre 1 et plus, tandis que la valeur du mot est généralement infini .

Dans l'exemple ci-dessus, le valeur animation-iteration-count est réglé sur infini , ce qui signifie que tant que la page Web est active, la propriété du bouton s'animera d'un état à l'autre, en continu.

La propriété Animation-timing-function

Cette propriété dicte le mouvement de l'élément animé lors de sa transition d'un état au suivant. Les propriété animation-timing-function se voit généralement attribuer l'une des trois valeurs de facilité.

  • Facilité dans
  • Facilité de sortie
  • Facilité d'entrée

Les valeur de facilité d'entrée est utilisé ci-dessus ; cela fait lentement passer l'animation d'un état à l'autre. Si l'objectif est de créer une transition lente lorsque le bouton passe d'un rectangle vert à un cercle bleu, vous utiliserez le valeur de facilité . Si vous vouliez seulement la transition lente dans la direction opposée, vous utiliseriez le valeur de facilité .

Réduire notre code

Dans la plupart des cas, la réduction de la durée d'un programme est considérée comme une approche pratique. C'est principalement parce que moins de lignes de code réduisent la probabilité que des erreurs passent inaperçues dans vos programmes.

Le code ci-dessus peut être réduit de quatre lignes. Ceci peut être réalisé en utilisant simplement la propriété animation sans identifier explicitement chacune de ses sous-propriétés.

Réduction du code pour l'exemple d'animation de bouton







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}