CSS3无限循环动画

Question

我尝试使用与此http://attasi.com/labs/picsselz类似的无限循环动画创建CSS / HTML横幅。

以下是JSFiddle中复制的代码。

我的横幅是全宽的，它应该占据屏幕的完整宽度。但是目前，示例动画具有固定宽度的包装器。

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 588px;
    margin-left: -600px;
    margin-top: -300px;
    background: #9cfcf0;
    overflow: hidden;
}

现在，如果我将包装宽度设置为100％，那么一些动画元素会随着时间消失。 JSFiddle

如何在全宽屏幕上使上述CSS3动画效果良好？

Answer 1

因此你可以看到所有的图像都是在他们自己的css属性上创建的......实际上超级惊人的imho ** ....

但是如果你将.wrapper更改为100%宽度，那么你将不得不意识到他使用了设定值。他希望通过特定参数设置所有内容。在您的情况下，您的屏幕宽度超过他为地面设置的2400px。

将地面值或您找到的任何似乎消失的值设置为更大的宽度。在我的情况下，我将它设置为2600px，因为它只消失了大约50像素并且它工作得很好。

我没有看到任何其他样式消失，但我确信这适用于所有情况。

**现在我意识到它是使用名为MACAW的工具设计和构建的。现在，金刚鹦鹉可能会令人敬畏和惊人，但它可能比我以前认为的花费的时间少得多。仍然非常惊人，但记住这一点。