私のCSS3 SVGオブジェクトアニメーションは、画面全体に行き渡らないのはなぜですか？

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/