Pourquoi Firefox et Internet Explorer n'animent-ils pas les images d'arrière-plan ?

Animation d'images d'arrière-plan : compatibilité entre navigateurs

Dans les animations Web, il est courant de modifier l'image d'arrière-plan lors des transitions ou des images clés. Cependant, des utilisateurs ont signalé que les animations d'image d'arrière-plan ne fonctionnent pas dans Firefox ou Internet Explorer.

Pourquoi Firefox et Internet Explorer ne parviennent pas à afficher les animations d'image d'arrière-plan

Comme spécifié dans les normes CSS, background-image n'est pas considéré comme une propriété animable. Firefox et Internet Explorer adhèrent à cette spécification, ce qui entraîne des animations manquantes.

Comportement de Chrome

Malgré la spécification, Chrome affiche les animations de l'image d'arrière-plan. Cela est dû à l'interprétation de Chrome selon laquelle l'image d'arrière-plan est implicitement animable (dans les limites de l'opacité et de la position).

L'étrange gestion des transitions par Firefox

Firefox se comporte de manière incohérente entre les transitions et les animations. . Bien qu'il affiche l'image d'arrière-plan lors de la transition, il ignore complètement l'animation.

Solution : utilisation de propriétés alternatives

Pour garantir la compatibilité entre navigateurs, évitez d'utiliser l'arrière-plan- image dans les images clés. Utilisez plutôt background-position ou opacity, comme suggéré par la citation suivante :

"Pour animer des dégradés, ils doivent être du même type."

Extrait de code :

Dans l'extrait de code fourni, le premier div affiche une transition d'image d'arrière-plan (fonctionnant dans tous les navigateurs), tandis que le deuxième div tente d'animer l'image d'arrière-plan (ne fonctionne pas dans Firefox ou Internet Explorer).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!