display none breaks animation

Basically, you cannot animate display properties, and even though you're only trying to animate the opacity, that transition fails because when the transition begins, the element doesn't exist. It has been removed from the flow due to the display: none property.

You can achieve the effect you're looking for by using visibility: hidden and visibility: visible, which is an animatable property, and if you need to effectively remove the element from the flow when it lacks visibility, then you can apply a max-height of 1px to the element and a margin-top of -1px.