问题:

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 ?

Here is the HTML

     Saved

The CSS

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

回答1:

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

回答2:

Here is the another way to do 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; }

You can see detailed article here.

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

I know i am too late to answer but posting this answer to save others time. Hope it helps you!!

回答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/

回答4:

Just FYI, there is a versatile library called animate.css you folks might be interested, it has a whole bunch of pure CSS3 animation. You can pick up and use it or learn the technique underneath.

回答5:

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

回答6:

This is the working code for your question.
Enjoy Coding....

转载请标明出处:CSS3 Transition - Fade out effect

文章来源: CSS3 Transition - Fade out effect

标签

transition

fade

css

animation