CSS, via @keyframes et transition, te permet de faire de l'animation entre deux propriétés CSS. Si tu peux ne faire qu'avec les propriétés, tant mieux.
Sinon, tu peux t'en servir pour position le background-image d'un élément en fonction du temps (& dans ce background-image, tu as N frames de l'animation, co^te à cîte). Le problème du JS (ou autre) chargeant 1 image PNG/frame réside dans l'éventuel temps de latence du téléchargement: le CSS (ou autre) change le background d'un élément pour l'image-frame suivante, le navigateur la télécharge, mais pendant ce téléchargement, le background de l'élément est vide.
On peut contrer ce problème:
• En testant si le navigateur télécharge toutes les ressources url() d'un CSS, même si elles ne sont pas affichées (et donc, il n'y aura pas de latence de téléchargement)
• En laissant la frame précédente en arrière-plan de la frame courante (mais là, ça peut coincer s'il y a de la transparence)
• En mettant toutes les frames dans une seule image PNG (et on déplace le background-position): c'est souvent utilisé, et pertinent pour de petites animations
• En cherchant si on peut déclarer des "ressources" au navigateur pour qu'il aille les chercher quand il charge la page (et on lui fait charger les PNG à ce moment-là plutôt qu'au moment de jouer l'animation)
Sinon, tu peux t'en servir pour position le background-image d'un élément en fonction du temps (& dans ce background-image, tu as N frames de l'animation, co^te à cîte). Le problème du JS (ou autre) chargeant 1 image PNG/frame réside dans l'éventuel temps de latence du téléchargement: le CSS (ou autre) change le background d'un élément pour l'image-frame suivante, le navigateur la télécharge, mais pendant ce téléchargement, le background de l'élément est vide.
On peut contrer ce problème:
• En testant si le navigateur télécharge toutes les ressources url() d'un CSS, même si elles ne sont pas affichées (et donc, il n'y aura pas de latence de téléchargement)
• En laissant la frame précédente en arrière-plan de la frame courante (mais là, ça peut coincer s'il y a de la transparence)
• En mettant toutes les frames dans une seule image PNG (et on déplace le background-position): c'est souvent utilisé, et pertinent pour de petites animations
• En cherchant si on peut déclarer des "ressources" au navigateur pour qu'il aille les chercher quand il charge la page (et on lui fait charger les PNG à ce moment-là plutôt qu'au moment de jouer l'animation)