web-dev-qa-db-fra.com

Transition CSS3 - Effet de fondu

J'essaie d'implémenter l'effet "fondu en sortie" en CSS pur. Voici le violon . J'ai étudié quelques solutions en ligne. Cependant, après avoir lu documentation en ligne , j'essaie de comprendre pourquoi l'animation de diapositives ne fonctionnerait pas. Des pointeurs?

Voici le HTML

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

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;
    }
}
csscss3css-transitions
74
user2246087

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;
}
74
karthikr

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

effet fadeIn 

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

effet fadeOut 

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

UPDATE 1: j'ai trouvé un didacticiel plus récent Transition CSS3: fadeIn et fadeOut comme des effets pour masquer les éléments d'affichage et Exemple d'info-bulle: Afficher le texte d'aide de masquage ou d'aide à l'aide de la transition CSS ici avec un exemple de code.

UPDATE 2: (Ajout des détails demandés par @ big-money)

Lors de l’affichage de l’élément (en passant à la classe visible), nous voulons que la visibilité: visible s’installe instantanément, il est donc correct de ne faire que la transition de la propriété opacity. Et lorsque vous masquez l'élément (en basculant vers la classe masquée), nous souhaitons retarder la visibilité: déclaration masquée, afin de pouvoir voir en premier la transition en fondu. Pour ce faire, nous déclarons une transition sur la propriété de visibilité, avec une durée de 0 et un délai. Vous pouvez voir l'article détaillé ici.

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

133
Mayank Modi

Puisque display n'est pas l'une des propriétés CSS animables; Un affichage: aucun remplacement de l'animation fadeOut avec des animations pss3 pures, il suffit de définir largeur: 0 et hauteur: à la dernière image, et utiliser animation-fill-mode : vers l'avant pour conserver les propriétés width: 0 et height: 0;

@-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;
}
6
Rui Wang

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

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

3
Adrift
.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.

3
user669677

Ceci est le code de travail pour votre question.
Profitez de la programmation ....

<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>
3
Vishal Biradar