CODEWITHSUNDEEP
csssvg
user1426442
user1426442

Reputation:

Why won't my CSS3 SVG Object animation go all the way across the screen?

What's wrong with my CSS3 newbie animation? It won't go all the way across the screen even when I set it to from 0px, to 100%.

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

Unfortunately the image won't show up but you can see the fallback text moving to get the gist of what's wrong.

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

Upvotes: 0

Views: 51

Answers (1)

Johannes
Johannes

Reputation: 67778

to {transform: translateX(100%);} in the keyframe rules makes the svg container move by 100% of it's own width, not that of the parent element...

If you know the width of the svg element, you can use this type of rule (in my example the width would be 320px):

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

https://jsfiddle.net/7t6gcfr0/

Upvotes: 1

Related Questions