html - CSS3 Transition reverse 不生效

Question

我创建了两个使用 z-index 重叠的 div，最上面的 div 会缩小宽度，但我无法让它从右向左缩小，即使我添加了 动画方向:反转;

EXAMPLE

如何改变收缩的方向？

Answer 1

animation-direction 在这里无关紧要。该属性与 css 动画有关。您正在使用 transition。完全不同的两件事。

给 .grow 一个正确的位置值，并将当前的 div 包装在具有相对定位的容器中:

WORKING DEMO

<div class="pos_rel">
    <div class="holder"></div> 
    <div class="grow"></div>
</div>

---

.grow {
    right:0;
}

此外，您可能应该在父元素上设置 :hover 以防止鼠标在转换时移出 .grow:

DEMO

.pos_rel:hover .grow {
    width: 50px;
}