爲什麼我的CSS3 SVG Object動畫不能在整個屏幕上一直走？

Question

我的CSS3新手動畫有什麼問題？即使當我將其設置爲從 0px，到 100％時，它也不會完全穿過屏幕。

https://jsfiddle.net/VCUgrad08/38grd6co/

不幸的是，圖像不會出現，但你可以看到後備文字移動得到的什麼是錯的要點。

<object id="pandaMove" data="http://svgshare.com/i/gY.svg" type="image/svg+xml">This is an image</object> 

Answer 1

to {transform: translateX(100%);}關鍵幀中的規則，使通過的100％的SVG貨櫃移動它自己的寬度，而不是父元素......

如果你知道的SVG元素的寬度，您可以使用此類型的規則（在我的例子中，寬度爲320像素）：

@keyframes pandaRight { 
    from {left: 0px;} 
    to {left: calc(100% - 320px);} 
} 

https://jsfiddle.net/7t6gcfr0/