CSS, ¿cómo hacer que un elemento aparezca y luego desaparezca?

La guía paso a paso o código que hallarás en este post es la solución más eficiente y válida que encontramos a tus dudas o dilema.

Solución:

Utilice css @fotogramas clave

.elementToFadeInAndOut 
    opacity: 1;
    animation: fade 2s linear;



@keyframes fade 
  0%,100%  opacity: 0 
  50%  opacity: 1 

aquí hay una DEMO

.elementToFadeInAndOut 
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;


@-webkit-keyframes fadeinout 
  0%,100%  opacity: 0; 
  50%  opacity: 1; 


@keyframes fadeinout 
  0%,100%  opacity: 0; 
  50%  opacity: 1; 

Lectura: Uso de animaciones CSS

Puedes limpiar el código haciendo esto:

.elementToFadeInAndOut 
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    opacity: 0;


@-webkit-keyframes fadeinout 
  50%  opacity: 1; 


@keyframes fadeinout 
  50%  opacity: 1; 

Si necesita un solo fundido de entrada/salida sin una acción explícita del usuario (como un mouseover/mouseout), puede usar un CSS3 animation: http://codepen.io/anon/pen/bdEpwW

.elementToFadeInAndOut 

    animation: fadeinout 4s linear 1 forwards;




@keyframes fadeinout 
  0%  opacity: 0; 
  50%  opacity: 1; 
  100%  opacity: 0; 

Configurando animation-fill-mode: forwards la animación conservará su último fotograma clave

Configurando animation-iteration-count: 1 la animación se ejecutará solo una vez (cambie este valor si necesita repetir el efecto más de una vez)

Encontré este enlace útil: css-tricks fade-in fade-out css.

Aquí hay un resumen de la publicación de csstricks:

Clases CSS:

.m-fadeOut 
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;

.m-fadeIn 
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;

en reaccionar:

toggle()
    if(true condition)
        this.setState(toggleClass: "m-fadeIn");
    else
        this.setState(toggleClass: "m-fadeOut");
    


render()
    return (
Element to be toggled
)

valoraciones y comentarios

Si te gusta la informática, tienes la libertad de dejar una sección acerca de qué te ha impresionado de este post.

---

---

Utiliza Nuestro Buscador