Étape 6: Animation de l’image
Maintenant que le texte est en mouvement, nous allons faire le chargeur un peu plus interactif en ajoutant des animations à l’image. Puisqu’il s’agit d’une image, je ne peux pas changer la couleur du texte. Mais, en réduisant l’opacité de l’image, je peux le faire tout à fait gris.
Revenons sur le code CSS pour la balise img et ajoutez ces lignes.
Cette propriété est utilisée pour ajouter des animations aux éléments en CSS. Vous avez peut-être remarqué que les ces deux lignes sont essentiellement les mêmes sauf pour le - webkit- préfixe à la première ligne. C’est parce que certains navigateurs prennent en charge uniquement - webkit- animations (comme Safari).
Ensuite, tapez les lignes suivantes de code dans la balise style.
Ceci alternativement réduire et augmenter l’opacité de l’image pour la rendre regard noir et gris.
Enfin, vous pouvez ajouter du texte sous le réservoir aussi bien.