Transición CSS3: efecto de desvanecimiento

Al intentar implementar un efecto de desvanecimiento usando CSS puro, puede resultar confuso por qué una animación de diapositiva no funcionaría. He aquí por qué:

La clave para un efecto de desvanecimiento radica en la transición de la propiedad de opacidad. La propiedad superior, que se utiliza para animaciones de diapositivas, no producirá el efecto deseado.

Efecto de desvanecimiento usando transición CSS3

Aquí hay un ejemplo de cómo lograr una efecto de desvanecimiento usando transiciones CSS3:

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

Cuando esta clase se aplica a un elemento, se desvanecerá gradualmente durante un período de 2 segundos.

Recursos adicionales:

• [Transición CSS3: efectos similares a desvanecimiento de entrada y salida](https://css-tricks.com/css3-transition-fadein-fadeout/)

Comprensión de las diferencias:

La diferencia clave entre un desvanecimiento y una animación de diapositiva radica en la propiedad a la que se realiza la transición. Para un efecto de desvanecimiento, es la propiedad de opacidad, mientras que para una animación de diapositiva, generalmente es una propiedad de posición como arriba o izquierda.

En el caso del código proporcionado, la animación está configurada para transformar la propiedad superior , lo que moverá el elemento fuera de la pantalla en lugar de desvanecerlo.