Почему animation иногда не срабатывает?

Question

[TtT RrR]

При открытии details контент появляется с animation, в котором opacity с 0 на 1 стоит, но этот animation не всегда работает и контент появляется без него.
Анимация может при первом нажатии сработать, а самое интересное, когда я в DevTools нажму на элемент для просмотра в нём css, то тогда анимация работает.
Демонстрация на видео: https://youtu.be/5FRvu6HY8BA
Код:

details{
  display:block;
  width:100%;
  overflow:hidden;
}
.footer__burger ul{
  list-style: none;
}
.footer__burger li{
  margin-bottom: 20px;
}
.footer__burger ul:last-child li:last-child{
  margin: 0;
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:block;
   font-size:1.4em;
   cursor: pointer;
   position: relative;
}
summary:before {  
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url("../images/icons/bottom-arrow.svg") center / 100% no-repeat;
  width: 24px;
  height: 24px;  
  content: "";
  position: absolute;
  -webkit-transition: -webkit-transform .5s ease;
  transition: -webkit-transform .5s ease;
  -moz-transition: transform .5s ease, -moz-transform .5s ease;
  transition: transform .5s ease;
  transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease;
}
details[open] > summary:before {
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
          transform: rotate(180deg);
}
details[open] summary ~ *{ 
  -webkit-animation: sweep .3s ease; 
     -moz-animation: sweep .3s ease; 
          animation: sweep .3s ease;
}
@-webkit-keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
@-moz-keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}

Comments

[Aetae]

Ну попробуй по умолчанию поставить opacity: 0...