在当前位置添加X像素CSS

Question

在当前位置添加X像素CSS

htmlcsscss-transitions

4

所以，我正在尝试使用纯CSS重新创建我在网上找到的.gif。然而，在创建动画部分时遇到了问题。这是我正在尝试重新创建的GIF： enter image description here

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

1. 3面墙 2. 9列 3. 27个立方体

然后通过更改为9行，3个平面和一个立方体返回。

我已经用像素测量了所有内容，并且完全“爆炸”状态下一切都符合要求，但我似乎无法弄清如何正确地进行动画处理。

在this fiddle中，您可以看到我已经成功实现了9列。但是，当我尝试动画到27个立方体（从样式列更改为单个立方体）时，我应用了影响“列阶段”中的立方体的边距。请参见this fiddle。

注意：将鼠标悬停在“测试区域”上以触发动画！

有没有办法让边距（所有来自第125行的margin-top）在第二个fiddle中发生的那一刻进行分段，但不影响实际发生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;
}

- Rvervuurt

3

你确定这不是来自 Seif Shawkat 的 CodePen？ - jbutler483

哈哈，酷，没想到有多个人都在尝试做到这一点 :) 不，我可以向你保证，在我发布问题之前，我都是独立完成的。谢谢提供链接！如果你想知道的话：这个原作来自荷兰的一位平面设计师：http://flrn.nl/ - Rvervuurt

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- onotype · Accepted Answer

问题

问题在于你实际上只是在第125行以及之后覆盖了你的样式。如果你删除转换，你将明白发生了什么：你在第116行将大多数块的margin-top设置为28px，然后在第126行用-30px覆盖它们。由于这是样式表中较晚的部分，因此优先级更高，从而完全忽略了早期的样式。请注意，过渡延迟不应像帧一样工作，你可以使用@keyframes来完成。

解决方案（类似）

使用其他属性来为第三个动作设置样式。我修改了你的fiddle，并使用top和left属性移动了第二个动作，并保持margin-top不变以执行第三个动作（值进行了一些调整）。将div[class^="row"]设置为相对定位，这就足够了。我创建了一个fiddle，但你可能想自己解决它。无论如何，我会把它留在这里。

可选说明

在这个代码片段中，我在尝试一些东西时更改了一些东西。您可以为您的块添加一些列类以减少第115行和第120行上的选择器。在您的类中，所有以数字1结尾的.block都是.col1。这样，第115行上的那条长长的代码就被简化为：

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