transition not working display none

1/*short answer:
2 use 'visibility' instead of 'display' */
3
4
5/*explanation: */
6/* THIS DOES NOT WORK --> */
7
8.navigation__quaternary {
9   display: none;
10   opacity: 0;
11   transform: scale(0.75);
12   transition: 
13     opacity 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, 
14     transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
15}
16
17.navigation__quaternary:hover {
18      display: block;
19      opacity: 1;
20      transform: scale(1);
21}
22
23/* THIS WORKS --> */
24
25.navigation__quaternary {
26   visibility: hidden;
27   opacity: 0;
28   transform: scale(0.75);
29   transition: 
30     opacity 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, 
31     transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
32}
33
34.navigation__quaternary:hover {
35      visibility: visible;
36      opacity: 1;
37      transform: scale(1);
38}
39
40/* I think is happens because 'display:none' elements are considered 
41not in the dom and thus browser cannot process transition */