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

Question

所以，我试图重新创建一个我在纯CSS中在网上找到的.gif文件。但是，在创建动画时，我遇到了一个问题。 这是我试图重新创建的GIF：

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

1. 3 wall
2. 9列
3. 27个立方体

然后再回到9行，3个单位和一个立方体。

我已经用像素测量了所有内容，而且所有内容都完全符合“爆炸式”＃34;状态，但我似乎无法弄清楚如何正确地制作动画。

在this fiddle中，您可以看到我设法进入了9列。但是，当我尝试动画到27个立方体（从样式列更改为单个立方体）时，我应用了边距，这也会影响＆＃34; columns-stage＆＃34;中的多维数据集。见this fiddle

  

注意：将鼠标悬停在test area上以触发动画！

有没有办法可以将边距（margin-top的所有line 125）分段发生在第二小提琴中的那一刻，但在2秒延迟之前不影响块实际上是在发生？我在想margin-top应该X + 30px或者其他什么，但我似乎无法为CSS找到类似的东西。我是否必须诉诸jQuery？ （我想测试一下我能用CSS获得多远，所以不要！）

这是其中一个块只是更改了margin-top，其余的CSS和HTML可以在Fiddles中找到（在这里复制/粘贴所有内容太多了）：

#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行和第125行覆盖你的风格。您可以移除转场，然后您就会明白发生了什么：您将第116行的大部分广告代码margin-top设置为28px，然后使用-30px在第126行覆盖它们。由于这是后来的样式表，因此它优先，因此完全忽略了之前的样式表。请注意，转换延迟不应该像帧一样工作。您可以使用@keyframes。

解决方案（有点）

使用其他属性为第三个操作设置块的样式。我编辑了你的小提琴，并使用top和left属性来移动第二个动作并保持margin-top完整，以完成第三个动作（值调整了一点。）

将div[class^="row"]设置为相对，以便您可以使用绝对定位。这就是它。我做了一个小提琴，但你可能想自己解决它。我会留下here。

可选备注

在小提琴中，我在尝试时改变了一些东西。您可以在块中添加一些列类，以减少第115行和第120行的选择器。在您的类中，以1结尾的所有.block都是.col1。这样，第115行的大线减少到

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