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

现在，在我的网页中，此图像从右侧背景（灰色）开始，最终位于容器中的正确位置（它是白色）。
我想做的事情（但不知道怎么做）是让图像从空气中显现出来。我的意思是它仍然有它的滑动动画，但它在灰色部分是不可见的，只出现在白色部分，就像容器的角落正在打印它。所以我想知道，有什么方法可以做到吗？

感谢您的帮助

编辑：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

更好的练习

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

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

2 个答案: