CSS3 Transition - Fade out effect

Question

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>

score 251 · Answer 1 · edited Dec 22 '22 at 10:15

251

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.

edited Dec 22 '22 at 10:15

starball

20,030
7
43
238

answered Jan 03 '14 at 18:07

immayankmodi

8,210
9
38
55

12

Nice answer, I'm looking to add `display:none` to erase the box when the "hide" animation ends, any idea ? – Apolo Sep 06 '14 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. – immayankmodi Sep 07 '14 at 09:55
7

@MMTac That doesn't work since `display` isn't one of the [animatable CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). See [Animating from “display: block” to “display: none”](http://www.impressivewebs.com/animate-display-block-none/). – peterflynn Dec 12 '14 at 09:48

score 126 · Accepted Answer · edited Jun 16 '23 at 22:03

126

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

edited Jun 16 '23 at 22:03

Lunar

480
4
11

answered May 17 '13 at 14:38

karthikr

97,368
26
197
188

21

dont need browser prefixes these days just plain ol' ... transition: opacity 3s ease-in-out; – danday74 Aug 04 '20 at 01:07

score 19 · Answer 3 · edited May 20 '20 at 06:21

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

Look into [**High Performance Animations**](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/). You should avoid using CSS properties that triggers re-layout, `width` and `height` are both sensitive. — Penny Liu, May 20 '20 at 06:18

score 8 · Answer 4 · answered Sep 28 '17 at 05:54

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>

Please attach an explanation of your solution: how it works? why it's different from the other solutions already posted? — lifeisfoo, Sep 28 '17 at 06: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. — Vishal Biradar, Sep 28 '17 at 06:44

Adrift · Answer 5 · 2013-06-16T05:10:34.243

3

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/

edited Jun 16 '13 at 05:10

answered Apr 09 '13 at 16:13

Adrift

58,167
12
92
90

Thanks, but how would i hide after the transition altogether? – Apr 09 '13 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 Apr 09 '13 at 16:18
1

great.. I got that, but one more question, Why does the hidden div come back the fade out? – Apr 09 '13 at 16:30

score 3 · Answer 6 · answered Jul 01 '14 at 13:55

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

score 0 · Answer 7 · answered Aug 18 '21 at 06:40

This may help :-

<!DOCTYPE html>
<html>
<head>
<style>

.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;
}
</style>
</head>
<body>

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

</body>
</html>

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, Aug 18 '21 at 15:06

score 0 · Answer 8 · answered Feb 02 '22 at 07:58

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

fruitloaf · Answer 9 · 2023-02-17T20:10:10.827

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

CSS3 Transition - Fade out effect

9 Answers9

Linked