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

Question

框通过关键帧动画(迭代：1，填充状态：向前(从宽度：10vw到宽度：20vw(最终关键帧(加宽。动画结束后，该框在 Safari 中没有响应(调整窗口大小时(。它在Chrome和Firefox中按预期工作。

我尝试使用 -webkit- 前缀并拆分动画属性，但无济于事。我被迫在动画结束后使用 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>

这是一个代码笔，注释掉了 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;
}