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    x000D   x000D   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    x000D   lt div class  dummy-wrap  gt  x000D     lt div class  success-wrap successfully-saved  gt Saved lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is the working code for your question  Enjoy Coding       lt html gt      lt head gt          lt style gt             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                    lt  style gt       lt  head gt      lt body gt          lt div id  animated-example  class  animated fadeOut  gt  lt  div gt       lt  body gt   lt  html gt

[css] CSS3 Transition - Fade out effect

Examples related to css

Examples related to css-transitions