Question

我创建了两个使用z-index重叠的div，而顶部的div会缩小宽度，但即使我添加animation-direction:reverse; <我也无法从右向左缩小/ p>

如何更改收缩的方向？

Answer 1

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

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

<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;
}

Answer 2

http://jsfiddle.net/venkat7668/a4DUv/2/

我已经修改了你的代码以获得你期望的动画。

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

.main {
    position: relative;
    width: 300px;
    height: 300px;
}
.holder {
    position:absolute;
    width: 300px;
    height: 300px;
    background:#cccccc;
    z-index:1;
}
.grow {
    width: 300px;
    height: 300px;
    background: green;
    -webkit-transition: width 5s;
    transition: width 5s;
    float:right;
    position:relative;
    z-index:2;
}
.grow:hover {
    width: 50px;
}

CSS3过渡反转没有生效

2 个答案: