CSS3图像滑动从不可见图像开始答案

【问题标题】：CSS3 Image sliding starting with invisible imageCSS3图像滑动从不可见图像开始
【发布时间】：2014-01-14 01:27:08
【问题描述】：

我的图片有这段代码，可以很好地从右侧滑入我的网站。

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

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

感谢您的帮助

编辑：JSFIDDLE http://jsfiddle.net/EpCM7/

【问题讨论】：

喜欢我正在开发的这个网站吗？ jpowell43.mydevryportfolio.com/Benosh%20V2/index.html我们还需要您的代码来查看我们正在处理的内容。
@user1477388 创建了一个 JSfiddle
@ShidilDinesh 我不确定这会有什么帮助。是的 - 我希望图像一开始是不可见的，但我希望它具有 100% 的不透明度。可以这样说 - 一切都从 0% 不透明度开始，然后在动画期间，背景部分仍然是 0%，容器上的部分是 100%，最后整个部分都处于开启状态容器。
@JoshPowell - 是的，原理是一样的！唯一的区别是它是单个图像。
我知道了，等一下。

标签： html css

【解决方案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

更好的实践

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

【讨论】：

正是我想要的。我不得不说一个有趣的解决方案。谢谢！
没问题，祝你好运！最后一个提示，要删除负值的使用，您可以在关键帧上执行 left: 100%; 以获得相同的效果。

【解决方案2】：

尝试为动画添加不透明度。可能是您正在寻找的效果

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

【讨论】：