Animation 调整窗口大小时，使用vw单元的translateX CSS动画不会'；我不能和Safari一起工作

在Safari上，使用vw单元的translateX CSS动画不起作用。比如,

@keyframes anime{
  from{
    transform: translateX(0)
 }
  to{
    transform: translateX(100vw)
  }
}

#cube{
  width: 30px;
  height: 30px;
  background: gray;
  animation-name: anime;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

如果像这样指定@keyframes，首先会正确设置元素的动画，但在调整窗口大小时，Safari不会正确设置元素的动画（Chrome会正确设置动画）

---

请参阅codepen上的详细信息：

Safari使用webkit渲染引擎渲染其图形。为什么不检查一下，也许问题就解决了，或者改用百分比（%）。