這是一個我如何嘗試使用CSS動畫的例子。我在Chrome中對所有動畫的使用都有同樣的體驗(但它們在Firefox中似乎工作正常)。當用戶第一次執行驅動動畫的動作時，它運行良好。在隨后的時間里，它根本不運行。我已經嘗試了各種方式來編寫動畫線，試圖讓它工作。

我錯過了什么嗎？是Chrome的一個bug(或者出于某種原因是一個特性)？這似乎是一個非常常見的用例，但我還沒有找到一個好的答案搜索。

@keyframes menu-animation {
  0% {
      opacity: 0;
      transform-origin: top right;
      transform: translateY(-16px) scaleY(.9);
  }
}

details:not([open]) details-menu {
  animation-name: none;
}

details[open] > div {
 animation: 300ms ease-out 0s 1 normal backwards running menu-animation;
}

<details>
 <summary>This is summary</summary>
 <div>This is hidden content</div>
</details>