Html 如何在由属性值定位的CSS动画中指定关键帧？

CSS动画中的关键帧以百分比“定位”：

@keyframes foo {
    0% { ... }
    50% { ... }
    100% { ... }
}

我有一个简单的动画，其中一个对象在屏幕上移动。然而，它移动的距离是未知的

是否可以在CSS动画中创建关键帧，但其在动画中的“位置”由属性值指定

伪代码：

@keyframes foo {
    0% {
        left: 0;
        background-color: green;
    }
    (left: 200px) { /* When the element's left position gets to 200px, this happens */
        background-color: red;
    }
    100% {
        left: 100%;
        background-color: red;
    }
}

---

对于这些情况，最好使用javascript和css制作动画，使用prodiedad转换将项目设置为在css中不可能平滑移动

---

您可以使用，或者（更快）

这在CSS中是不可能的。你能做的最好的事情就是在元素左边200px的位置选择一个百分比。关键帧是以百分比表示的，如果你想使用css，你必须使用媒体查询为不同宽度的关键帧。