CSS transition won't work with display

by Slava

HTML

<div class="parent">
    <p>Box 1 transitions opacity. -&gt; <span class="box1">Box 1</span></p>
    
    <p>Box 2 does not transition opacity. -&gt; <span class="box2">Box 2</span></p>
</div>

CSS

p{
  padding:20px;
  background:rgba(0,100,120,0.1);
}

.box1, .box2{
  opacity:0;
  transition:opacity 200ms cubic-bezier(0.645,0.045,0.355,1);
}

.box1 {
  display:none;
}

p:hover .box1, p:hover .box2{
    display: inline;
    opacity: 1;
}