0
img {
    position: absolute;
    animation: slide 2s;
}
@keyframes slide {
  0% {left: 0%;}
  50% {left:50%;}
  100% {left: 50%;}
    /*0% { left: -150%; }
    35% { left: 50%; }
    65% { left: 50%; }
    100% { left: 100%; }*/
}

I have my css and i'm trying to get my <img src="./images/test_image.png" /> to slide into the screen from the left, but it jumps around after it finishes. I've had a look at a few online resources, but I must not be fully understanding the way keyframes work.

Any help or pointers would be great! Thanks

pourmesomecode
  • 4,108
  • 10
  • 46
  • 87
  • This is how it looks http://jsfiddle.net/c3pmbjyy/. What do you want??? – Manwal Oct 27 '15 at 12:33
  • @Manwal Yeah so once it comes in, it jumps back to where it began. I've been trying to get it so it slides in on screen, and doesn't jump backwards? Hope I explained it well enough – pourmesomecode Oct 27 '15 at 12:34
  • So i think this is what you want http://jsfiddle.net/c3pmbjyy/1/ – Manwal Oct 27 '15 at 12:35
  • @Manwal more along the lines of, at the 100% mark that's where it stops. It doesn't move any further. So it begins, slides in, lands at 100% and stops. But it jumps back to the starting position at the end of the keyframe for some reason – pourmesomecode Oct 27 '15 at 12:36
  • 2
    I think all you need is `animation-fill-mode: forwards` in which case this question is a dupe. – Harry Oct 27 '15 at 12:37
  • 1
    @Harry Yep, found it. :) – Paulie_D Oct 27 '15 at 12:38
  • Brilliant! Sorry for the dupe, I must of been searching for the wrong answers, thanks for help! – pourmesomecode Oct 27 '15 at 12:39
  • @GoodOldSnoopy It's ok, don't worry. Dupes are not bad, they serve as good sign posts in case a future user is searching with different keywords. – Harry Oct 27 '15 at 12:40

0 Answers0