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

-1

关键帧在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; 
    } 
}

来源

2016-09-27 Duh-Wayne-101

这是不可能的CSS做到这一点。你可以做的最好的选择是靠近元素左边200px的地方。 – skyline3000

关键帧以百分比表示，如果您要使用css，则必须使用媒体查询使用不同宽度的关键帧。 https://developer.mozilla.org/en/docs/Web/CSS/@keyframes –