从左到右动画图像以显示另一幅图像

Question

我试图在网上搜索如何解决此问题的解决方案，

我想要实现的是在网页的正中央显示一张图像。

<img src="image1.png">

然后在该图像的顶部，我将具有相同的图像，只是另一种颜色。

<img src="image2.png">

此刻，该网页仅显示其中一张图像，因为它们彼此重叠，并且形状相同，只是颜色不同。

我想要的效果是无限地从左到右更改图像。如果图像完全不移动，则它们应该保持全部居中。

那有可能吗？

类似的例子，只是没有悬停-它应该是无限的，并且从左到右： http://jsfiddle.net/75Umu/3/

Answer 1

也许这会让您走上正确的道路。现在您要做的就是更改这些图像，并在.wrap上使用边距，宽度和高度，在.image-1，.image-2上使用宽度和高度。

html,
body { position: relative; margin: 0; padding: 0; height: 100%; }

.wrap { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; width: 200px; height: 200px; }
.image-1,
.image-2 { overflow: hidden; position: absolute; top: 0; left: 0; width: 200px; height: 200px;  }
.image-2 { animation: my-animation 2s alternate infinite; }
.image-1 img,
.image-2 img { display: block; }

@keyframes my-animation {
  0% { width: 0%; }
  100% { width: 100%; }
}

<div class="wrap">
  <div class="image-1"><img src="https://www.mirous.eu/stack-overflow/img/flake-black.png" /></div>
  <div class="image-2"><img src="https://www.mirous.eu/stack-overflow/img/flake-blue.png" /></div>
</div>

Answer 2

您可以通过在CSS和要使用的图像中进行少量更改来实现它。

您需要同时将两个图像作为一个图像。我正在使用下面的图片作为背景。

我在CSS中添加了以下更改。

.skillsDouble li {
    ...
    ...
    ...
    background-image: url("https://i.stack.imgur.com/6png9.png");
    background-position:0 0;
    ...
    ...
}

.skillsDouble li:hover {
    background-position:100% 0;
}

ul {
    list-style-type:none;
}
ul li a {
    text-decoration:none;
}
.skillsDouble {
    float: left;
}
.skillsDouble li {
    width:100px;
    height:50px;
    text-align:center;
    line-height:50px;
    float:left;
    /* Old browsers */
    background-image: url("https://i.stack.imgur.com/6png9.png");
    background-position:0 0;
    margin-left:10px;
    transition:all 2s ease;
}
.skillsDouble li:hover {
    background-position:100% 0;
}
.skillsDouble li a {
    color:white;
}

<div class="skillsDouble">
    <ul>
        <li><a href="#">Automation</a>
        </li>
        <li><a href="#">TDD</a>
        </li>
    </ul>
</div>
<!--End skills double-->

http://jsfiddle.net/nimittshah/3ct0spmr/