У меня возникла проблема, которая, по-видимому, препятствует воспроизведению переходов CSS на элементе, который одновременно меняется сdisplay:none.

В следующем примере div имеют идентичный CSS, за исключением того, что при наведении на первый элемент скрываются два других. Второй div скрыт с помощьюvisibility:hiddenи третий скрыт с помощьюdisplay:none.

Когда вы наводите курсор мыши на первый элемент div, поведение соответствует ожидаемому: первый переход div и два других скрываются. Когда вы щелкаете мышью, поведение отличается от того, что я ожидал: первый div возвращается обратно в нормальное состояние, второй div не скрывается, затем возвращается обратно в нормальное состояние, но третий div не отображается и все еще находится в нормальном состоянии.

Я ожидал, что третий div будет соответствовать поведению второго и также будет скрыт, а затем вернется к нормальному состоянию.

div{
  width:100px;
  height:50px;
  background:red;
  
  border-radius:50%;
  
  transition: border-radius 1s;
}

#hover:hover, #hover:hover ~ div{
  border-radius:0%;
}

#hover:hover ~ #hide1{
  visibility:hidden;
}

#hover:hover ~ #hide2{
  display:none;
}

<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>

Поскольку второй div работает, как и ожидалось, довольно легко придумать альтернативные решения, используяvisibility:hidden и немного позиционирования CSS, но возможно ли это сделать только с помощью CSSdisplay:none? Если нет, то почемуdisplay:none повлиять на другие переходы таким образом?

Примечание. Похоже, что это было бы легко найти, но мои поиски только подняли вопрос о попытке переходаdisplay Само свойство, а не его побочные эффекты на другие переходы.