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?

Answer 1

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

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 detailed article here.

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