139

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

9 Answers 9

263

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.

3
  • 12
    Nice answer, I'm looking to add display:none to erase the box when the "hide" animation ends, any idea ?
    – Apolo
    Commented Sep 6, 2014 at 19:43
  • 1
    I'm not sure what you need here but you can try display:block instead of visibility: visible in .visible class likewise display:none instead of visibility: hidden in .hidden class from above example. Commented Sep 7, 2014 at 9:55
  • 9
    @MMTac That doesn't work since display isn't one of the animatable CSS properties. See Animating from “display: block” to “display: none”.
    – peterflynn
    Commented Dec 12, 2014 at 9:48
130

You can use transitions instead:

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    transition: opacity 3s ease-in-out;
    opacity: 1;
}
1
  • 23
    dont need browser prefixes these days just plain ol' ... transition: opacity 3s ease-in-out;
    – danday74
    Commented Aug 4, 2020 at 1:07
19

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;
}
1
  • 4
    Look into High Performance Animations. You should avoid using CSS properties that triggers re-layout, width and height are both sensitive.
    – Penny Liu
    Commented May 20, 2020 at 6:18
8

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>

2
  • 4
    Please attach an explanation of your solution: how it works? why it's different from the other solutions already posted?
    – lifeisfoo
    Commented Sep 28, 2017 at 6:24
  • @lifeisfoo I tried with above all solutions, but this is the simple and easiest way to do it and one more important thing is the text will fade away automatically after some seconds(10). So no need of any click. Commented Sep 28, 2017 at 6:44
4

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)

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

3
  • Thanks, but how would i hide after the transition altogether?
    – user2246087
    Commented Apr 9, 2013 at 16:18
  • There are several ways - you can just increase the top value so that it moves "off" the viewport or you can use opacity for the animation so that it fades out like you seem to want ..
    – Adrift
    Commented Apr 9, 2013 at 16:18
  • 1
    great.. I got that, but one more question, Why does the hidden div come back the fade out?
    – user2246087
    Commented Apr 9, 2013 at 16:30
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;
}

demo here.

1

You can remove element from the page via Position Absolute;

then:

transform: translateX(-200vw);
opacity: 0;
transition: opacity 0.2s;
transition-delay: 200ms;

then when you want element to appear, use this class:

opacity: 1;
transform: translateX(0px);

logic here is that: Transform -> removes/places element into the view INSTANTLY; while opacity takes care of the Fade In / Out effects

We also added slight delay with transiton-delay, to make it little bit better

NOTE: if you don't like TranslateX, you can replace it with scale(0); scale(1) -> to make element appear and disappear instantly

0

This may help :-

.cardiv{
    height:200px;
    width:100px;
    background-color:red;
    position:relative;
    text-align:center;
    overflow:hidden;
}
.moreinfo{
    height:0%;
    transition: height 0.5s;
    opacity:1;
    position: absolute;
    bottom:0px;
    background-color:blue;
}

.cardiv:hover .moreinfo{

    opacity: 1;
    height:100px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="cardiv">
    <div class="moreinfo">Hello I am inside div</div>
</div>

</body>
</html>

1
  • 2
    While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
    – blazej
    Commented Aug 18, 2021 at 15:06
0

Use the forwards fill-mode in CSS for it to remain on the last part of the animation.

I suggest using transform: tranlsateY(-20px); instead of using css positions, but if you insist of using it then set the .dummy-wrap position into absolute

.dummy-wrap {
  animation: slideup 2s forwards;
  -moz-animation: slideup 2s forwards;
  -webkit-animation: slideup 2s forwards;
  -o-animation: slideup 2s forwards;
  position: absolute;
}

@keyframes slideup {
    0% {
        top: 0px;
    }
    75% {
        top: 0px;
    }
    100% {
        top: -20px;
    }
}
<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved (Slide UP)</div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.