CSS3位置动画不影响兄弟姐妹？答案

【问题标题】：CSS3 position animating not affecting siblings?CSS3位置动画不影响兄弟姐妹？
【发布时间】：2014-06-06 00:23:10
【问题描述】：

我想知道，如果 CSS 位置动画带有“过渡”和“变换”真的不会影响动画对象周围对象的位置，或者我是否遗漏了一些东西。我正试图让它影响兄弟姐妹。

-webkit-transition: all 0.5s ease;
-webkit-transform: translateY(10em);

http://jsfiddle.net/W2L7B/6/

感谢您的帮助！

【问题讨论】：

看起来不像。其实有什么问题吗？
我编辑了问题以阐明我的目标。
好的...这是预期的行为。为此使用边距：jsfiddle.net/W2L7B/4
我试过了，但不幸的是，在 Safari 中为 margin 属性设置动画会导致动画跳动（一般不是 webkit）。
动画transform 的问题之一是元素的原始空间将保持原样。这意味着它不会影响周围的元素。（但我猜你已经想通了）

标签： css animation css-position transform

【解决方案1】：

对于translate3d，我相信你需要有perspective。试试这个：

.slide {
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,10em,0);
}

【讨论】：

我认为你没有达到 OP 目标。
我知道，但是如果转换本身没有做任何事情，它应该如何工作。只是指出这一点。
感谢您的输入，但很遗憾它不会影响动画。我将代码更改为 2d。

【解决方案2】：

如果你想让它们都移动，只需将过渡添加到#second，然后添加这个css：

.slide, .slide + div { /* or use ~ if you want it to affect all next siblings */
  -webkit-transform: translateY(10em);
  -webkit-perspective: 1000;
}

FIDDLE

【讨论】：

是的，我也是这么想的，但我不确定是否还有其他可能性:)
除非您将要移动的所有内容包装起来并将类添加到其中，否则不会使用转换