Transición CSS3 – Efecto de desvanecimiento

Recabamos por diferentes espacios para así traerte la solución para tu inquietud, si tienes alguna difcultad deja la inquietud y te responderemos con mucho gusto.

Solución:

Aquí hay otra manera de hacer lo mismo.

efecto fadeIn

.visible 
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;

efecto de desvanecimiento

.hidden 
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;

UPDATE 1:

Encontré un tutorial más actualizado Transición CSS3: efectos similares a fadeIn y fadeOut para ocultar elementos de visualización y Tooltip Example: Show Hide Hint o Help Text usando CSS3 Transition aquí con código de muestra.

UPDATE 2: (Detalles agregados solicitados por @big-money)

Al mostrar el elemento (cambiando a la clase visible), queremos que el visibility:visible para activarse instantáneamente, por lo que está bien cambiar solo la propiedad de opacidad. Y al ocultar el elemento (cambiando a la clase oculta), queremos retrasar el visibility:hidden declaración, para que podamos ver primero la transición de desvanecimiento. Estamos haciendo esto al declarar una transición en la propiedad de visibilidad, con una duración de 0 y un retraso. Puedes ver un artículo detallado aquí.

Sé que llegué demasiado tarde para responder, pero publico esta respuesta para ahorrar tiempo a otros. ¡¡Espero que te ayude!!

Puedes usar transiciones en su lugar:

.successfully-saved.hide-opacity
    opacity: 0;


.successfully-saved 
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;

Ya que display no es una de las propiedades CSS animables. Una display:none Reemplazo de animación fadeOut con animaciones CSS3 puras, solo configure width:0 y height:0 en el último cuadro, y use animation-fill-mode: forwards mantener width:0 y height:0 propiedades.

@-webkit-keyframes fadeOut 
    0%  opacity: 1;
    99%  opacity: 0.01;width: 100%; height: 100%;
    100%  opacity: 0;width: 0; height: 0;
  
@keyframes fadeOut 
    0%  opacity: 1;
    99%  opacity: 0.01;width: 100%; height: 100%;
    100%  opacity: 0;width: 0; height: 0;


.display-none.on
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;

Comentarios y puntuaciones del tutorial

Si conservas alguna indecisión o capacidad de modernizar nuestro noticia puedes ejecutar una reseña y con gusto lo interpretaremos.

---

---

Utiliza Nuestro Buscador