CSS3 animation - transform: scaleX(-1) - go/back - size down - why?

Hello i try to make a little animation where mario go and back and change direction, i try with "transform: scaleX(-1)" but this not work like i want.

I want that mario keeps his size until the arrival then changes direction, without stopping

this is a preview :

code :

#base img { position : absolute; height: 125px; bottom: 0px; left: 0px; animation: roll 10s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes roll { 0% {left:0px;} 50% {left:875px;transform: scaleX(-1);} 100% {left:0px;} } 

Thanks for help !

3 Answers

It is because you need to better handle the switch of scaleX between 1 and -1 Here, as defined, it will take all the animation from 0% to 50% to switch from 1 to -1. You need to defined better keypoints as below

#base { height: 150px; width: 1000px; background-color : #efefef; border: solid black 2px; position: relative; } #base img { position : absolute; height: 125px; bottom: 0px; left: 0px; animation: run 10s; animation-iteration-count: infinite; } @keyframes run { 0% {left:0px; transform: scaleX(1);} 50% {left:875px; transform: scaleX(1);} 51% {transform: scaleX(-1);} 100% {left:0px; transform: scaleX(-1);} }

<div id = "base"><img src=""></div>

Note that the alternate direction has been removed as well

If you want to keep the size but rotate back and forth I suggest using transform: rotateY(180deg); to transform: rotateY(0deg); instead of transforming the scale property. Also you might need to add more animation anchors to make the turn instant, instead of slowly rotating the image while its moving.

Example codepen:

Also note; since you've 'resetted' the animation going back and forth from 0% - 50% - 100% you dont really need the 'alternate' option as animation-direction.

try like this

#base img { position : absolute; height: 125px; bottom: 0px; left: 0px; animation: run 10s infinite; } @keyframes run { 0% {left:0px;} 50% {left:875px; transform: scaleX(1);} 55% {transform: scaleX(-1);} 95% {transform: scaleX(-1);} 100% {left:0px;} }