Efekt przejścia CSS3-Fade out

Próbuję zaimplementować efekt "fade out" w czystym CSS. Oto skrzypce . Zajrzałem do kilku rozwiązań online, jednak po przeczytaniu dokumentacji online staram się dowiedzieć, dlaczego animacja slajdów nie będzie działać. Jakieś wskazówki?

Oto HTML 

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

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

Możesz zamiast tego użyć przejść: 

.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/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-17 14:38:13

Oto inny sposób, aby zrobić to samo.

Efekt Fadeina 

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

Efekt FadeOut 

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

Możesz zobaczyć szczegółowy artykuł tutaj.

UPDATE: Znalazłem bardziej aktualny tutorial Przejście CSS3: FADEIN i fadeOut podobne efekty do ukrycia pokaż elementy i Tooltip przykład: Pokaż Ukryj podpowiedź lub tekst pomocy za pomocą przejścia CSS3 tutaj z przykładowym kodem.

Wiem, że jestem za późno, aby odpowiedzieć, ale zamieszczając tę odpowiedź, aby zapisać innym razem. Mam nadzieję, że ci to pomoże!!

 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/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-06 15:59:56

Zapomniałeś dodać właściwość position do klasy .dummy-wrap, a wartości top/left/bottom/right nie mają zastosowania do elementów statycznie umieszczonych (domyślnie)

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/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-16 05:10:34

Dla twojej informacji, istnieje uniwersalna biblioteka o nazwie animate.css może Was zainteresować, ma całą masę czystej animacji CSS3. Możesz go podnieść i użyć lub nauczyć się techniki pod spodem.

 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/doraprojects.net/template/agent.layouts/content.php on line 54
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 tutaj.

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

To jest kod roboczy dla Twojego pytania.
Miłego Kodowania....

<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/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-28 05:54:56