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 sortant réside dans la transition de la propriété d'opacité. La propriété top, 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 :

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}

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 : fadeIn et fadeOut comme effets](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.