CSS3 Transition – Fade out effect

by

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

More Related Contents:

  1. How can I transition height: 0; to height: auto; using CSS?
  2. Transitions on the CSS display property
  3. Use CSS3 transitions with gradient backgrounds
  4. Using CSS for a fade-in effect on page load
  5. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  6. Transition background-color via slide animation
  7. How can I transition width of content with width: auto?
  8. Hover effect : expand bottom border
  9. CSS transition shorthand with multiple properties?
  10. Using CSS transitions in CSS Grid Layout
  11. Spin or rotate an image on hover
  12. Expand div from the middle instead of just top and left using CSS
  13. CSS transition with visibility not working
  14. CSS transition auto height not working [duplicate]
  15. CSS3 Fade Effect
  16. Why can’t I animate custom properties (aka CSS variables)?
  17. CSS: Animation vs. Transition
  18. CSS transitions with calc() do not work in IE10+
  19. CSS how to make an element fade in and then fade out?
  20. Bug in CSS3 rotateY transition on Safari?
  21. How to transition CSS display + opacity properties
  22. Flip a 3D card with CSS
  23. Less CSS: Mixins with Variable Number of Arguments
  24. Delay mouseout/hover with CSS3 transitions
  25. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  26. CSS transition between left -> right and top -> bottom positions
  27. CSS transition fade in
  28. Image moves on hover when changing filter in chrome
  29. Why does enabling hardware-acceleration in CSS3 slow down performance?
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment