I am trying to make an animation in CSS
. I read some examples of it online and I cannot figure out what I'm doing wrong...
I want my potato image to go from left to right and then turn around and then go back to the left side again, but I probably messed up something in my code? Any suggestions what I'm doing wrong or how I should face this problem instead?
Here is my code:
#pot {
bottom: 15%;
position: absolute;
-webkit-animation: linear infinite alternate;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
0% {
left: 0;
}
50% {
right: 0;
}
100% {
left: 0;
, webkit-transform: scaleX(-1);
}
}
<div id="pot">
<img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>
See Question&Answers more detail:os