Pourquoi mon animation de diapositive ne fonctionne-t-elle pas lorsque j'essaie de créer un effet de fondu en CSS ?

Transition CSS3 : effet de fondu sortant

Lorsque vous essayez d'implémenter un effet de fondu sortant en utilisant du CSS pur, il peut être difficile de comprendre pourquoi une animation de diapositive ne fonctionnerait pas. Voici pourquoi :

La clé d'un effet de fondu réside dans la transition de la propriété d'opacité. La propriété top, qui est utilisée pour les animations de diapositives, ne produira pas l'effet souhaité.

Effet de fondu à l'aide de la transition CSS3

Voici un exemple de la façon d'obtenir un effet de fondu à l'aide des transitions CSS3 :

<code class="css">.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}</code>

Lorsque cette classe est appliquée à un élément, elle disparaîtra progressivement sur une durée de 2 secondes.

Ressources supplémentaires :

• [Transition CSS3 : effets de type fadeIn et fadeOut](https://css-tricks.com/css3-transition-fadein-fadeout/)

Comprendre les différences :

La principale différence entre un fondu sortant et une animation de diapositive réside dans la propriété en cours de transition. Pour un effet de fondu sortant, il s'agit de la propriété opacity, tandis que pour une animation de diapositive, il s'agit généralement d'une propriété de position comme top ou left.

Dans le cas du code fourni, l'animation est configurée pour transformer la propriété top , ce qui déplacera l'élément hors de l'écran plutôt que de le faire disparaître.

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!