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

Question

CSS 动画中的关键帧的百分比为 "positioned"：

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

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

是否可以在 CSS 动画中制作关键帧，但它们在动画中的 "position" 是由 属性 值指定的？

伪代码：

@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;
    }
}

Answer 1

对于这些情况，最好使用 javascript 和 css 制作动画，使用 prodiedad 过渡将项目设置为平滑移动

Answer 2

CSS不可能。

您可以使用 jQuery animate, MotionJS or VelocityjS 执行此操作（更快）