在Safari中无法重新计算CSS动画的最终关键帧中的视口单位

Question

长方体通过关键帧动画(迭代次数: 1，填充状态:向前)从宽度: 10vw加宽到宽度: 20vw (最终关键帧)。动画结束后，该框在Safari中没有响应(在调整窗口大小时)。它可以在Chrome和Firefox中正常工作。

我已经尝试使用-webkit- prefix并拆分动画属性，但没有效果。我被迫在动画结束后使用js来更改CSS类(代码片段之后的代码)。

​

.box {
  width: 10vw;
  height: 100px;
  background: green;
  animation: widen 2s 1 forwards;
}

@keyframes widen {
  0% {
    width: 10vw;
  }
  100% {
    width: 20vw;
  }
}

<div id="box-id" class="box"></div>

​

Here是一个使用js变通方法注释掉的代码，动画速记属性被拆分了:它仍然不能像预期的那样工作。下面是js的变通方法，我想摆脱它：

CSS

.box2 {
    width: 20vw;
    height: 100px;
    background: green;
}

JS

document.getElementById("box-id").addEventListener('animationend', (e) => {
  e.target.classList.add("box2");
  e.target.classList.remove("box");
});

我发现了许多与safari和关键帧相关的问题，但我找不到任何关于响应单元的具体内容。我想知道我是否做错了什么，或者是否有已知的修复此行为的方法。提前谢谢你

Answer 1

Safari不会通过描述动画的速记方法进行阅读。

您可以尝试：

.box{
     animation-name: widen;
     animation-duration: 2s;
     animation-timing-function: ease;
     animation-delay: 0s;
     animation-iteration-count: 1;
     animation-direction: normal;
     animation-fill-mode: forwards;
     animation-play-state: running;
}