依次淡入 div 延迟

Question

我想做这样的事情

图像应从右侧淡入并缩放为 100%，然后向右淡出，反之亦然

那是我的 code

问题是当第二个 .spinner 淡入时它的行为与第一个不同，当它达到过渡的 75% 时它离开 .row

第三个也出现在下一行，我试过display:inline但它不起作用

有什么帮助吗？

PS: 忘掉红色按钮吧，过渡效果也很好 .spinner

Answer 1

您希望所有元素共享相同的运动。

因此，它们的初始位置必须相同。如果您在流程中使用元素，则不会发生这种情况。绝对定位它们：

.spinner {
    position: absolute;
    left: 500px;
}

我已经删除了很多不再需要的前缀，并添加了一些 z-index 更改。这并不完美，您需要稍微改进一下...

Fade in div one after another with delay