CODEWITHSUNDEEP
csscss-transitions
user2246087
user2246087

Reputation:

CSS3 Transition - Fade out effect

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>

Upvotes: 139

Views: 574360

Answers (9)

Vivid_Darkness
Vivid_Darkness

Reputation: 3

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>

Upvotes: 0

Nishant Kaushik
Nishant Kaushik

Reputation: 34

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>

Upvotes: 0

Vishal Biradar
Vishal Biradar

Reputation: 1229

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>

Upvotes: 8

karthikr
karthikr

Reputation: 99620

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

Upvotes: 131

fruitloaf
fruitloaf

Reputation: 2892

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

Upvotes: 1

immayankmodi
immayankmodi

Reputation: 8580

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.

Upvotes: 264

Rui Wang
Rui Wang

Reputation: 249

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

Upvotes: 19

user669677
user669677

Reputation: 

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

Upvotes: 3

Adrift
Adrift

Reputation: 59779

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/

Upvotes: 4

Related Questions