Transition CSS3 - Effet de fondu enchaîné

Question

Transition CSS3 - Effet de fondu enchaîné

Demandé el 9 de Avril, 2013: Quand la question a-t-elle été
455457 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie de mettre en œuvre l'effet "fade out" en pure CSS. Voici le modèle violon . J'ai cherché quelques solutions en ligne, mais après avoir lu l'avis de la documentation en ligne J'essaie de comprendre pourquoi l'animation des diapositives ne fonctionne pas. Avez-vous des pistes ?

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

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

Demandé el 9 de Avril, 2013 par Utilisateur non enregistré

Answer 1

5 Réponses

Answer 2

218voto

MM Tac Points 861

Voici un autre moyen de faire de même.

effet de fondu enchaîné

.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 tutoriel plus récent Transition CSS3 : effets de type "fadeIn" et "fadeOut" pour masquer les éléments à afficher y Exemple d'infobulle : Afficher le texte d'aide ou de conseil en le masquant à l'aide d'une transition CSS3 ici avec un exemple de code.

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

Lors de l'affichage de l'élément (en passant à la classe visible), nous voulons que la balise visibility:visible pour se mettre en place instantanément, donc il est correct de faire une transition uniquement sur la propriété d'opacité. Et lorsque nous masquons l'élément (en passant à la classe hidden), nous voulons retarder la transition de la propriété d'opacité. visibility:hidden afin que nous puissions voir la transition du fondu en premier. Pour ce faire, nous déclarons une transition sur la propriété visibility, avec une durée de 0s et un délai. Vous pouvez consulter un article détaillé ici .

Je sais que j'arrive trop tard pour répondre, mais je poste cette réponse pour faire gagner du temps aux autres. J'espère que cela vous aidera !

Répondu el 3 de Janvier, 2014 par MM Tac (861 Points )

Answer 3

122voto

karthikr Points 36157

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

Répondu el 17 de Mai, 2013 par karthikr (36157 Points )

Answer 4

17voto

Rui Wang Points 179

Desde display n'est pas l'une des propriétés CSS animables. Un site display:none remplacement de l'animation fadeOut par des animations CSS3 pures, il suffit de définir width:0 y height:0 à la dernière image, et utiliser animation-fill-mode: forwards pour garder width:0 y height:0 propriétés.

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

Répondu el 26 de Novembre, 2018 par Rui Wang (179 Points )

Answer 5

7voto

vrb Points 362

Voici le code de travail pour votre question.
Enjoy Coding....

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

Répondu el 28 de Septembre, 2017 par vrb (362 Points )

Answer 6

3voto

Adrift Points 19227

Vous avez oublié d'ajouter une propriété de position à la .dummy-wrap et les valeurs top/left/bottom/right ne s'appliquent pas aux éléments positionnés de manière statique (par défaut).

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

Répondu el 9 de Avril, 2013 par Adrift (19227 Points )

Transition CSS3 - Effet de fondu enchaîné

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Transition CSS3 - Effet de fondu enchaîné

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: