CSS transition on visibility property

This content is over 8 years old. It may be obsolete and may not reflect the current opinion of the author.

There are various occasions that I found I need to do this:


#el {
  transition: opacity 1s ease;

#el.fade-out {
  opacity: 0;


el.addEventListener('transitionend', function afterFadeOut() {
  el.removeEventListener('transitionend', afterFadeOut);
  el.style.display = 'none';

but later I am being told that the same effect can be achieved with 0 line of JavaScript:

#el {
  transition: opacity 1s ease, visibility 1s ease;

#el.hide {
  opacity: 0;
  visibility: hidden;

Where visibility: hidden will be actually applied 1 sec later at the end of the CSS transition.

For a fade in effect (transition away from hidden), the element will be visible at the very start. Read the spec working draft for formal definition.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.