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 de l'animation d'images clés.
L'animation CSS est obtenue en modifiant l'état initial d'un élément HTML grâce à ses différentes propriétés. Certaines propriétés CSS générales qui peuvent être animées incluent:
- Largeur
- Hauteur
- Positionner
- 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'images clés.
Qu'est-ce qu'un élément d'images clés?
L' élément keyframes 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. L' élément keyframes 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 souhaitiez animer un bouton rectangulaire vert en le transformant en bouton rond bleu.
Dans les paramètres de la de la section ci – dessus , vous devrez placer tout le style nécessaire pour que l'élément ressemblant à un bouton vert rectangulaire, puis dans la à la section, vous placerez toutes les exigences de style pour transformer ce bouton en bouton rond bleu .
Si vous pensez, "cela ne ressemble pas trop à de l'animation". Eh bien, c'est parce qu'un élément clé de tout ce processus n'a pas encore été introduit – ce composant est la propriété d'animation.
La propriété Animation
La propriété animation a 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 une 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
- Animation-retard
- Nombre d'itérations d'animation
Utilisation de l'animation sur une page Web
En utilisant le scénario ci-dessus, le but est de créer un bouton animé.
Exemple d'animation de bouton
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* 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;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page -->
<button class="btn">Click!</button>
</body>
</html>
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 censées cibler.
La propriété Animation-name
Cette propriété est la propriété la plus importante de la liste. Sans la propriété animation-name , vous n'auriez aucun identifiant à coller à l' élément keyframes , 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 pouvez toujours avoir une animation assez décente. Cependant, si vous oubliez la propriété de nom d'animation, vous n'aurez 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 à l'autre.
Dans l'exemple ci-dessus, la propriété animation-duration est définie sur 5 secondes (5s), 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 prendre quelques secondes pour se charger complètement (en raison de plusieurs facteurs différents). Ainsi, la propriété animation-delay 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, la propriété animation-delay est définie sur 4s, ce qui signifie que l'animation ne commencera que 4 secondes après la visite de la page Web (ce qui laisse à 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 à l'autre. La propriété animation-iteration-count prend des valeurs qui sont des mots et des nombres. La valeur numérique peut être n'importe quoi à partir de 1, tandis que la valeur du mot est généralement « infinie ».
Dans l'exemple ci-dessus, la valeur du nombre d'itérations d'animation est définie 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 permanence.
La propriété Animation-timing-function
Cette propriété dicte le mouvement de l'élément animé lors de sa transition d'un état à l'autre. La propriété animation-timing-function se voit généralement attribuer l'une des trois valeurs d'accélération.
- Facilité dans
- Facilité
- Facilité d'entrée et de sortie
La valeur de facilité d'entrée est utilisée ci-dessus; cela transforme lentement 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 la valeur de facilité d'entrée . Si vous ne vouliez que la transition lente dans la direction opposée, vous utiliseriez la valeur d'accélération .
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. Ceci est principalement dû au fait 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. Cela 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* 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;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page --
<button class="btn">Click!</button>
</body>
</html>
Dans le code ci-dessus, une ligne de code est utilisée pour obtenir le même résultat qui prenait auparavant cinq lignes de code – c'est ainsi que vous produisez un code plus propre .
Vous pouvez désormais animer vos pages Web
Vous avez maintenant les compétences requises pour animer n'importe quel élément HTML sur une page Web. Vous devez également comprendre comment la propriété animation et l'élément keyframes fonctionnent ensemble pour rendre l'animation CSS possible.
La propriété d'animation avec sa liste de sous-propriétés étendues est sans aucun doute intéressante. Pourtant, il existe un large éventail d'autres propriétés CSS que vous pourriez trouver utiles.
Crédit d'image: Josh Riemer / Unsplash