Ik probeer het “fade out” -effect in pure CSS te implementeren. Hier is de fiddle . Ik keek echter een aantal oplossingen online, na het lezen van de Documentatie online , i Probeer erachter te komen waarom de dia-animatie niet zou werken. Alle aanwijzingen?
.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>Antwoord 1, Autoriteit 100%
U kunt in plaats daarvan overgangen gebruiken:
.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;
}
Antwoord 2, Autoriteit 167%
Hier is een andere manier om hetzelfde te doen.
Fadein-effect
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
fadeout-effect
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
UPDATE 1:
Ik vond meer up-to-date tutorial CSS3-overgang: fadein en fadeout-achtige effecten om de showelementen te verbergen en Tooltip Voorbeeld: Show Hide Hint of Help-tekst met behulp van CSS3-overgang hier met voorbeeldcode.
UPDATE 2:(toegevoegde details gevraagd door @ big-money)
Bij het tonen van het element (door over te schakelen naar de zichtbare klasse), willen we dat de visibility:visibleonmiddellijk in werking treedt, dus het is oké om alleen de eigenschap opacity over te zetten. En wanneer we het element verbergen (door over te schakelen naar de verborgen klasse), willen we de visibility:hidden-declaratie uitstellen, zodat we eerst de fade-out-overgang kunnen zien. We doen dit door een overgang aan te geven op de eigenschap zichtbaarheid, met een 0s-duur en een vertraging. Je kunt hiereen gedetailleerd artikel bekijken.
Ik weet dat ik te laat ben om te antwoorden, maar plaats dit antwoord om anderen tijd te besparen. Ik hoop dat het je helpt!!
Antwoord 3, autoriteit 11%
Aangezien displayniet een van de animeerbare CSS-eigenschappen is.
Eén display:nonefadeOut-animatie vervangen door pure CSS3-animaties, stel gewoon width:0en height:0in als laatste frame, en gebruik animation-fill-mode: forwardsom de eigenschappen width:0en height:0te behouden.
@-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;
}
Antwoord 4, autoriteit 5%
Dit is de werkende code voor uw vraag.
Veel plezier met coderen….
<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>
Antwoord 5, Autoriteit 3%
U bent vergeten om een positie-eigenschap toe te voegen aan de .dummy-wrapKlasse, en de bovenste / linker / onderste / rechterwaarden zijn niet van toepassing op statisch gepositioneerde elementen (de standaard)
Antwoord 6, Autoriteit 3%
.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;
}