Pourquoi mon image d'arrière-plan CSS3 ne s'anime-t-elle pas ?

Animation d'images d'arrière-plan avec CSS3 : un guide de dépannage

Lorsque vous essayez d'animer des images d'arrière-plan à l'aide de CSS3, vous pouvez rencontrer des problèmes empêchant le comportement attendu . Pour remédier à ces problèmes, examinons le code fourni et identifions les idées fausses potentielles.

Dans l'exemple que vous avez fourni, l'animation semble échouer en raison d'une utilisation incorrecte des images clés CSS. La syntaxe des règles « @-webkit-keyframes » est obsolète dans la spécification CSS 2020. Pour résoudre ce problème, vous devez mettre à jour votre code pour utiliser la syntaxe standardisée "@keyframes".

Voici un extrait mis à jour qui devrait fonctionner comme prévu :

@keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  animation-name: test;
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: linear;
}

N'oubliez pas de mettre à jour le préfixe d'animation dans les outils de développement de votre navigateur ou dans le fichier CSS par "@keyframes test" au lieu de "@-webkit-keyframes test."

Avec ces ajustements, votre image d'arrière-plan devrait maintenant s'animer de manière fluide comme prévu.

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!