css - Microsoft Edge 动画问题

Question

只是好奇为什么这在 Edge 中不起作用。它适用于我检查过的所有其他浏览器。Edge 中是否存在导致此问题的错误？

仅供引用，这不是我的代码，只是好奇。

/**
 *  Animations
 */
@keyframes checkboxCheckedAnimation {
  50%, 100% {
width: 100vw;
height: 100vh;
  }
  100% {
border-radius: 0;
  }
}

@keyframes checkboxUncheckedAnimation {
  0% {
width: 100vw;
height: 100vh;
  }
}

@keyframes changeWidthOfElementAnimation {
  50% {
width: 0;
  }
  100% {
width: 100%;
  }
}

https://codepen.io/WispProxy/details/GqzoYg

Answer 1

不确定为什么会这样，但这确实有效。

   @keyframes checkboxCheckedAnimation {
  50% {
width: 100vw;
height: 100vh;
  }
  100% {
border-radius: 0;
// Added these lines
width: 100vw;
height: 100vh;
  }
}