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

Changement de l'image d'arrière-plan avec des animations CSS3

Cette question répond à un problème où l'animation de l'image d'arrière-plan d'une page Web ne fonctionne pas correctement. Le code CSS fourni semble être correctement structuré, mais l'animation n'est pas appliquée à l'élément.

Solution

La solution mise à jour pour 2020 consiste à exploiter la règle @keyframes d'une manière légèrement différente. Voici le code mis à jour :

#mydiv {
  animation: changeBg 1s infinite;
  width: 143px;
  height: 100px;
}

@keyframes changeBg {
  0%, 100% {
    background-image: url("https://i.sstatic.net/YdrqG.png");
  }
  25% {
    background-image: url("https://i.sstatic.net/2wKWi.png");
  }
  50% {
    background-image: url("https://i.sstatic.net/HobHO.png");
  }
  75% {
    background-image: url("https://i.sstatic.net/3hiHO.png");
  }
}

Code HTML

Pour appliquer l'animation, le code HTML doit inclure :

<div>

Explication

Ce code mis à jour définit une animation d'image clé nommée changeBg avec différentes images d'arrière-plan à des images clés spécifiques. L'animation est ensuite appliquée à l'élément #mydiv, ce qui lui permet de modifier son image d'arrière-plan en douceur au fil du temps.

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!