Transição CSS3: efeito Fade Out

Ao tentar implementar um efeito fade out usando CSS puro, pode ser confuso por que uma animação de slide não funcionaria. Eis o porquê:

A chave para um efeito de fade out está na transição da propriedade de opacidade. A propriedade top, que é usada para animações de slides, não produzirá o efeito desejado.

Efeito Fade Out usando transição CSS3

Aqui está um exemplo de como conseguir um efeito de fade out usando transições CSS3:

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

Quando esta classe é aplicada a um elemento, ela desaparecerá gradualmente ao longo de 2 segundos.

Recursos adicionais:

• [Transição CSS3: efeitos semelhantes a fadeIn e fadeOut](https://css-tricks.com/css3-transition-fadein-fadeout/)

Compreendendo as diferenças:

A principal diferença entre um fade out e uma animação de slide está na propriedade que está sendo transferida. Para um efeito de fade out, é a propriedade de opacidade, enquanto para uma animação de slide, normalmente é uma propriedade de posição como top ou left.

No caso do código fornecido, a animação é definida para transformar a propriedade top , o que moverá o elemento para fora da tela em vez de esmaecê-lo.