html - 以不可见图像开始的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;
}
}

所以现在在我的网页中，此图像从右侧背景(灰色)开始，并在容器中的正确位置结束(白色)。
我想做的(但不知道怎么做)是让图像凭空出现。我的意思是它仍然会有它的滑动动画，但是它在灰色部分是不可见的，并且只出现在白色部分之外，就像容器的 Angular 正在打印它一样。所以我想知道，我有什么办法可以做到吗？

感谢帮助

编辑: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;
}

fiddle :JSFIDDLE, remove /show in url to view code

更好的做法

@-webkit-keyframes image {
    0% {
        left: 100%; /* removes the use of negative values */
    }
    100% {
        left: 0;
    }
}