html - Transition does not work when position is fixed -

click on icon in codepen see output.

i container fixed. when container fixed transition x icon not work. when click on menu button x icon not have transition.

you need uncomment position fixed see how effects x icon.

https://codepen.io/anon/pen/dzxagb

#container {   display: none; /*  uncomment position fixed  */ /*   position: fixed; */   height: 100%;   width: 100%;   background: blue;   z-index: 9999;     transition: 0.2s linear; }  #menu, #close {       position: absolute;   top: 4%;   right: 2%;     transition: 0.3s linear;     font-size: 3em; }  #close {   opacity: 0; } 

when click on menu icon can change position of container temporary. it's not best works.

add code:

menu.onclick = function() {   container.style.position = 'static'; }  x.onclick = function() {   container.style.position = 'fixed'; }