将 X 像素添加到当前位置 CSS

Question

所以，我正在尝试重新创建我在网上找到的纯 CSS 的 .gif。但是，我运行在创建动画部分时遇到了问题。这是我要重新创建的 GIF：

如您所见，源图像分解为：

3 面墙
9 列
27 个立方体

然后再次更改为 9 行、3 个单位和一个立方体返回。

我已经以像素为单位测量了所有内容，并且所有内容都符合完全 "exploded" 状态，但我似乎无法弄清楚如何正确设置动画。

在this fiddle you can see I've managed to get to the 9 columns. However, when I try to animate to the 27 cubes (changing from styling columns to single cubes), I apply margin that also affect the cubes in the "columns-stage". See this fiddle

Note: Hover over the test area to trigger the animation!

有没有一种方法可以让边距（line 125 中的所有 margin-top）在第二个 fiddle 发生的那一刻发生，但不影响实际发生 2 秒延迟之前的块？我想说 margin-top 应该得到 X + 30px 或其他东西，但我似乎找不到 CSS 的类似东西。我必须求助于 jQuery 吗？（我想测试 CSS 能走多远，所以最好不要！）

这是其中一个块仅对其 margin-top 进行更改的部分之一，其余的 CSS 和 HTML 可以在 Fiddles 中找到（这很简单copy/paste 这里的一切太多了):

#test-area:hover + #cube .block111, #test-area:hover + #cube .block121, #test-area:hover + #cube .block131 {
    margin-top: -30px;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}

Answer 1

问题

问题是您基本上只是用第 125 行及以后的样式覆盖您的样式。您可以删除转换，然后您就会明白发生了什么：您在第 116 行将大多数块的 margin-top 设置为 28px，然后在第 126 行用 -30px 覆盖它们。由于这在样式表的后面，因此它具有优先权，因此完全忽略了前面的样式表。请注意，过渡延迟不应该像帧一样工作。您可以为此使用@keyframes。

解决方案（有点）

使用其他属性为第三个动作设置块的样式。我编辑了你的 fiddle 并使用了 top 和 left 属性来移动第二个动作，并保持 margin-top 完好无损地进行第三个动作（值稍微调整了一下。）

将 div[class^="row"] 设置为相对定位，以便您可以使用绝对定位。差不多就是这样。我做了一个 fiddle 但你可能想自己解决它。尽管如此，我还是会保留它 here。

可选备注

在 fiddle 中，我在尝试时更改了一些位。您可以向块中添加一些列 class 以减少第 115 行和第 120 行的选择器。在您的 classes 中，所有以 1 结尾的 .block 都是 .col1。这样，第 115 行的那条大线就缩减为

#test-area:hover + #cube .col1{
  ...
}

将 X 像素添加到当前位置 CSS

Add X pixels to current position CSS

html

css

css-transitions