如何在由屬性值定位的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 –