Answers for "transition display not working"

css display none transition

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

transition not working display none

/*short answer:
 use 'visibility' instead of 'display' */


/*explanation: */
/* THIS DOES NOT WORK --> */

.navigation__quaternary {
   display: none;
   opacity: 0;
   transform: scale(0.75);
   transition: 
     opacity 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, 
     transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.navigation__quaternary:hover {
      display: block;
      opacity: 1;
      transform: scale(1);
}

/* THIS WORKS --> */

.navigation__quaternary {
   visibility: hidden;
   opacity: 0;
   transform: scale(0.75);
   transition: 
     opacity 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, 
     transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.navigation__quaternary:hover {
      visibility: visible;
      opacity: 1;
      transform: scale(1);
}

/* I think is happens because 'display:none' elements are considered 
not in the dom and thus browser cannot process transition */