CSS3 Изображение скользящее начало с невидимым изображением

Question

У меня есть этот код для моего изображения, чтобы приятно вставить на мой сайт с правой стороны.

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; 
} 
} 

Так прямо сейчас в моей веб-странице, это изображение начинается в правой части фона (это серый) и заканчивается в правильном положении в контейнере (это белый).
Что я хочу сделать (но понятия не имею, как это сделать), чтобы изображение появилось из воздуха. Я имею в виду, что он все равно будет иметь свою скользящую анимацию, но он будет невидим на серой части и появляться только из белой части, как это делал угол контейнера. Поэтому мне интересно, можно ли мне это сделать?

Спасибо за помощь

EDIT: JSFIDDLE http://jsfiddle.net/EpCM7/

Answer 1

Хорошо, что я делаю, что делает изображение ребенка в div.parent.

Затем я применяю overflow: hidden; к родительскому. Когда изображение скользит из-за его родителя, оно не будет видно из-за стиля.

HTML-:

<div class="parent"> 
    <img class="move" src="http://vabankbroker.com/templates/vabankbroker/images/2.jpg" style="margin-right: -3px;" /> 
</div> 

CSS-код:

div.parent { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

скрипку: 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

попробуйте добавить непрозрачность анимации. может быть эффект ваш искать

@-webkit-keyframes image { 
    0% { 
    opacity: 0; 
    right:-708px; 
    } 
    100% { 
    opacity: 1; 
    right: 0; 
    } 
}