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

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

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

> 3面墙
> 9列
> 27个立方体

然后通过改变到9行,3个平面和一个立方体再次返回.

我已经用像素测量了一切,一切都符合完全“爆炸”的状态,但我似乎无法弄清楚如何正确地制作动画.

在this fiddle你可以看到我已经设法进入9列.但是,当我尝试动画到27个立方体(从样式列更改为单个立方体)时,我应用的边距也会影响“列 – 阶段”中的多维数据集.见this fiddle

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

有没有一种方法可以将边距(第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;
}

解决方法

问题

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

解决方案(有点)

使用其他属性为第三个操作设置块的样式.我编辑了你的小提琴并使用了top和left属性来移动第二个动作并保持margin-top完整无缺,以完成第三个动作(值调整了一些.)

将div [class ^ =“row”] s设置为relative,这样您就可以使用绝对定位.这就是它.我做了一个小提琴,但你可能想自己解决它.不过,我会留下它here.

可选注释

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

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