Question

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

Answer 1

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

Answer 2

CSS中不可能。

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

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

2 个答案: