CSS3 Image sliding starting with invisible image - html

Question

I have this code for my image to nicely slide in to my website from the right side.
img.move
{
position:relative
-webkit-animation-name: image;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes image {
0% {
right:-708px;
}
100% {
right: 0;
}
}
So right now in my webpage, this image starts in the right side background (it's gray) and ends up in its correct position in the container (it's white). What I want to do (but have no idea how to) is to make the image appear from thin air. What I mean is that it would still have its sliding animation, but it would be invisible on the gray part, and only appear out of white part, like the corner of container was printing it. So I wonder, is there any way I could do it?
Thanks for help
EDIT: JSFIDDLE http://jsfiddle.net/EpCM7/

Answer 1

Okay what I am doing is making the image a child of the div.parent.
Then I apply overflow: hidden; to the parent. When the image slides in from outside of it's parent it will not be visible due to the style.
The html:
<div class="parent">
<img class="move" src="http://vabankbroker.com/templates/vabankbroker/images/2.jpg" style="margin-right: -3px;" />
</div>
The css:
div.parent {
width: 100%;
height: 100%;
overflow: hidden;
}
The Fiddle: JSFIDDLE, remove /show in url to view code
Better Practice
#-webkit-keyframes image {
0% {
left: 100%; /* removes the use of negative values */
}
100% {
left: 0;
}
}

Answer 2

try adding opacity to the animation . might be the effect your looking for
#-webkit-keyframes image {
0% {
opacity: 0;
right:-708px;
}
100% {
opacity: 1;
right: 0;
}
}