I am trying to implement the "fade out" effect in pure CSS. Here is the fiddle. I did look into a couple of solutions online, however, after reading the documentation online, I am trying to figure out why the slide animation would not work. Any pointers?
.dummy-wrap {_x000D_
animation: slideup 2s;_x000D_
-moz-animation: slideup 2s;_x000D_
-webkit-animation: slideup 2s;_x000D_
-o-animation: slideup 2s;_x000D_
}_x000D_
_x000D_
.success-wrap {_x000D_
width: 75px;_x000D_
min-height: 20px;_x000D_
clear: both;_x000D_
margin-top: 10px;_x000D_
}_x000D_
_x000D_
.successfully-saved {_x000D_
color: #FFFFFF;_x000D_
font-size: 20px;_x000D_
padding: 15px 40px;_x000D_
margin-bottom: 20px;_x000D_
text-align: center;_x000D_
-webkit-border-radius: 5px;_x000D_
-moz-border-radius: 5px;_x000D_
border-radius: 5px;_x000D_
background-color: #00b953;_x000D_
}_x000D_
_x000D_
@keyframes slideup {_x000D_
0% {top: 0px;}_x000D_
75% {top: 0px;}_x000D_
100% {top: -20px;}_x000D_
}_x000D_
_x000D_
@-moz-keyframes slideup {_x000D_
0% {top: 0px;}_x000D_
75% {top: 0px;}_x000D_
100% {top: -20px;}_x000D_
}_x000D_
_x000D_
@-webkit-keyframes slideup {_x000D_
0% {top: 0px;}_x000D_
75% {top: 0px;}_x000D_
100% {top: -20px;}_x000D_
}_x000D_
_x000D_
@-o-keyframes slideup {_x000D_
0% {top: 0px;}_x000D_
75% {top: 0px;}_x000D_
100% {top: -20px;}_x000D_
}<div class="dummy-wrap">_x000D_
<div class="success-wrap successfully-saved">Saved</div>_x000D_
</div>This question is related to
css
css-transitions
You can use transitions instead:
.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;
}
.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;
}
You forgot to add a position property to the .dummy-wrap class, and the top/left/bottom/right values don't apply to statically positioned elements (the default)
This is the working code for your 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>
Here is another way to do the same.
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:
I found more up-to-date tutorial CSS3 Transition: fadeIn and fadeOut like effects to hide show elements and Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition here with sample code.
UPDATE 2: (Added details requested by @big-money)
When showing the element (by switching to the visible class), we want the visibility:visible to kick in instantly, so it’s ok to transition only the opacity property. And when hiding the element (by switching to the hidden class), we want to delay the visibility:hidden declaration, so that we can see the fade-out transition first. We’re doing this by declaring a transition on the visibility property, with a 0s duration and a delay. You can see a detailed article here.
I know I am too late to answer but posting this answer to save others time. Hope it helps you!!
Since display is not one of the animatable CSS properties.
One display:none fadeOut animation replacement with pure CSS3 animations, just set width:0 and height:0 at last frame, and use animation-fill-mode: forwards to keep width:0 and height:0 properties.
@-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;
}
Source: Stackoverflow.com