animation CSS.a

Je préfère généralement animer les éléments par une action du visiteur (clic ou survol) mais dans le cas de la boule de noël, par exemple, une animation "automatique" est plus logique.

Il ne s'agit pas d'un gif mais d'une animation CSS, c'est à dire que l'on définit les évolutions d'un ou des plusieurs attributs dans le code CSS.

Exemple sur une bordure:

Le code
<p id="ayg">&nbsp;</p>

<style><!--
#ayg{animation:gg 2s linear 0s infinite normal;width:388px; height:690px; margin:10px 50px 0 30px; float:left; background:url('https://ekladata.com/av15KIyP8vR4B9JytGIu7yvbbZg.gif'); background-size:cover; border:8px dashed red; box-sizing:border-box;}
@keyframes gg{
0% {border:8px dashed red;}
50% {border:8px dashed yellow;}
100% {border:8px dashed reb;}}
--></style>

Vous trouvez l'écriture de l'animation appliquée à l'élément ayg.
Cette animation est nommée "gg", dont la vitesse et le cycle sont d'abord définis puis ses paramètres sont définis dans une keyframes
Au départ: 0%, la bordure est rouge, à 50%, elle passe au jaune pour revenir au jaune à 100% et reprendre en boucle