Move Image across using CSS3 animation - html

Question

I am trying to slide an image across the screen and then stay at a fixed point. I have looked online and found a few variants on what I have but nothing seems to work.

Answer 1

Have a look at this fiddle.
http://jsfiddle.net/lharby/ysgzpuer/
I had to pass in
-webkit-animation: mini 2s normal;
-moz-animation: mini 3s normal;
-o-animation: mini 3s normal;
animation: mini 2s normal;
to the .mini class to animate the div.
Update: This also has the opacity animated:
http://jsfiddle.net/lharby/ysgzpuer/1/
By editing:
#-webkit-keyframes mini {
from {
left:0px;
opacity:0;
}
to{
left:404px;
opacity:1;
}

Answer 2

#-webkit-keyframes mini {
from {
left:-166px;
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
Or this if you don't have overflow: hidden on the parent to avoid the scrollbar
#-webkit-keyframes mini {
from {
left:0px;
-webkit-transform: translateX(-166px)
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>

Answer 3

this will keep the last frame of the animation after its done
animation-fill-mode: forwards;
#-webkit-keyframes mini {
from{
opacity:0;
}
to{
opacity:1;
}
from {
left:0px;
}
to{
left:404px;
}
}
.frame1 {
-webkit-animation: mini 2s normal forwards;
-moz-animation: mini 30s normal forwards;
-o-animation: mini 30s normal forwards;
animation: mini 2s normal forwards;
opacity:1;
}
.mini {
background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png");
position: absolute;
top: 10px;
left: -404px;
width: 166px;
height: 70px;
z-index: 7;
}
<div class="frame1 mini">
</div>

Answer 4

hope this is what you are looking for
Html
<div class="stage">
<figure class="ball"></figure>
</div>
CSS
#keyframes slide {
0% {
left: 0;
top: 0;
}
100% {
left: 488px;
top: 0;
}
}
.stage {
background: #eaeaed;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 538px;
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.stage:active .ball {
animation-play-state: paused;
}
.ball {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
Fiddle Demo