ejemplo de código css de animación fade in fade out

Después de mucho batallar hemos encontrado el arreglo de este conflicto que algunos los usuarios de nuestro sitio presentan. Si tienes algún dato que compartir no dudes en aportar tu información.

Ejemplo 1: css se desvanece

/* Just add .fade-out class to element */

.fade-out 
	animation: fadeOut 2s;
  	opacity: 0;


@keyframes fadeOut 
  from 
  	opacity: 1;
  
  to 
 	opacity: 0;
  

Ejemplo 2: css se desvanece

/* Answer to: "css fade out" */

/*
  With the code below, all you have to do is use JavaScript to
  give the element ".hide-opacity" and it'll fade-out.

  Feel free to edit this code so it works on hover, focus, active
  or any other special selector possible with CSS and of course
  feel free to use this code with your JavaScript too!
*/

.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;


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

Ejemplo 3: en 10 segundos se desvanece en una tarjeta html css

Your issue stems from applying two animations at once that you actually want to run in sequence. To get this working reliably you have two options:

CSS only: http://jsfiddle.net/marionebl/M9LR6/

Note opacity: 0; to keep the message hidden when the animation completes. Plus: This won't work in IE <= 9, it does not support keyframe animations: http://caniuse.com/#feat=css-animation

@keyframes fadeInOut 
    0% 
        opacity: 0;
    
    16% 
       opacity: 1;
    
    84% 
       opacity: 1;
    
    100% 
       opacity: 0;
    


.message 
    width: 400px;
    margin: 0 auto;
    opacity: 0;
    text-align: center;
   -webkit-animation: fadeInOut 6s;
   animation: fadeInOut 6s;

Involving JS: http://jsfiddle.net/marionebl/P26c9/1/

Is somewhat more flexible and easier to change, supports IE9.

CSS:

@-webkit-keyframes fadeIn 
    from 
        opacity: 0;
    
    to 
        opacity: 1;
    

@keyframes fadeIn 
    from 
        opacity: 0;
    
    to 
        opacity: 1;
    


@-webkit-keyframes fadeOut 
    from 
        opacity: 1;
    
    to 
        opacity: 0;
    

@keyframes fadeOut 
    from 
        opacity: 1;
    
    to 
        opacity: 0;
    


.fadeIn 
    -webkit-animation: fadeIn;
    animation: fadeIn;
    opacity: 1;


.fadeOut 
    -webkit-animation: fadeOut;
    animation: fadeOut;
    opacity: 0;


.fast 
    -webkit-animation-duration: 1s;
    animation-duration: 1s


.message 
    width: 400px;
    margin: 0 auto;
    text-align: center;

JS:

var $message = $('.message');
$message.addClass('fadeIn fast');

setTimeout(function()
   $message.removeClass('fadeIn').addClass('fadeOut');
, 5000);

Sección de Reseñas y Valoraciones

No se te olvide difundir este ensayo si lograste el éxito.

---

---

Utiliza Nuestro Buscador