CSS3 Transition – Effet de sortie en fondu

J’essaie d’implémenter l’effet “fade out” en CSS pur. Voici le violon J’ai examiné quelques solutions en ligne, mais après avoir lu la documentation en ligne , j’essaie de comprendre pourquoi l’animation de diapositives ne fonctionnerait pas. Des pointeurs?

Voici le HTML

Saved

Le 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; } } 

Vous pouvez utiliser des transitions à la place:

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

Voici une autre façon de faire la même chose.

fadeEn effet

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

effet de fondu

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

Vous pouvez voir l’article détaillé ici.

UPDATE: J’ai trouvé un didacticiel mis à jour CSS3 Transition: fadeIn et fadeOut effets similaires pour masquer les éléments de démonstration et les info-bulles Exemple: Show Hide Hint ou Help Text en utilisant CSS3 Transition ici avec exemple de code.

Je sais que je suis trop tard pour répondre mais en affichant cette réponse pour faire gagner du temps aux autres. J’espère que ça vous aide !!

Vous avez oublié d’append une propriété de position à la classe .dummy-wrap et les valeurs supérieure / gauche / inférieure / droite ne s’appliquent pas aux éléments positionnés de manière statique (valeur par défaut)

http://jsfiddle.net/dYBD2/2/

Just FYI, il existe une bibliothèque polyvalente appelée animate.css, vous pourriez être intéressé, il a tout un tas d’animation CSS3 pure. Vous pouvez prendre et l’utiliser ou apprendre la technique ci-dessous.

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

démo ici.

Ceci est le code de travail pour votre question.
Profitez de codage ….