CSS3 Transición-Fade out efecto

Estoy tratando de implementar el efecto "fade out" en CSS puro. Aquí está el violín. Miré en un par de soluciones en línea, sin embargo, después de leer la documentación en línea, estoy tratando de averiguar por qué la animación de diapositivas no funcionaría. ¿Algún consejo?

Aquí está el HTML

<div class="dummy-wrap">
    <div class="success-wrap successfully-saved">Saved</div>
</div>

El CSS

.dummy-wrap {
    animation: slideup 2s;
    -moz-animation: slideup 2s;
    -webkit-animation: slideup 2s;
    -o-animation: slideup 2s;
}
.success-wrap {
    width: 75px;
    min-height: 20px;
    clear: both;
    margin-top: 10px;
}
.successfully-saved {
    color: #FFFFFF;
    font-size: 20px;
    padding: 15px 40px;
    margin-bottom: 20px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #00b953;
}
@keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
@-moz-keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
@-webkit-keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
@-o-keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
Author: Muhammad bin Yusrat, 2013-04-09
Source

6 answers

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;
}
 61
Author: karthikr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-17 14:38:13

Aquí está la otra manera de hacer lo mismo.

Efecto fadeIn 

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

Efecto fadeOut 

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

Puedes ver el artículo detallado aquí.

UPDATE: He encontrado un tutorial más actualizado Transición CSS3: fadeIn y fadeOut como efectos para ocultar mostrar elementos y Ejemplo de ayuda: Mostrar Ocultar Sugerencia o Texto de ayuda usando Transición CSS3 aquí con código de ejemplo.

Sé que es demasiado tarde para responder, pero publicar esta respuesta para salvar otras veces. Espero que te ayude!!

 104
Author: Mayank Modi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-06 15:59:56

Olvidó agregar una propiedad position a la clase .dummy-wrap, y los valores top/left/bottom/right no se aplican a los elementos posicionados estáticamente (el valor predeterminado)

Http://jsfiddle.net/dYBD2/2 /

 3
Author: Adrift,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-16 05:10:34

Solo para su información, hay una biblioteca versátil llamada animate.css ustedes podrían estar interesados, tiene un montón de animación CSS3 pura. Puedes recogerlo y usarlo o aprender la técnica debajo.

 3
Author: jasonslyvia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-19 01:59:48 
.fadeOut{
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;
}
.fadeOut.end{
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;
}

Demo aquí.

 3
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-01 13:55:29

Este es el código de trabajo para su pregunta.
Disfruta Programando....

<html>
   <head>

      <style>

         .animated {
            background-color: green;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }

         @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOut"></div>

   </body>
</html>
 2
Author: Vishal Biradar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-28 05:54:56