可以将位置：relative和position：absolute与CSS平滑转换结合起来吗？

详细版本：

我正在创建一个小部件(我称之为甲板)，我不能有一个崩溃和扩张的状态。到目前为止，这一切都很好。

两国之间的切换自然需要一个过渡动画。这也是工作，但不是我想要实现的方式。我想做的是使用CSS转换，而不是使用JavaScript进行绝对定位，就像我现在一样。

唉，目前的情况是，在扩展状态下，甲板上的牌总是被绝对定位，当他们被添加到甲板上时，他们的位置就是在飞行中计算的。当折叠时，前四个以层叠方式堆叠，其余的在第四个卡的顶部。目视模仿一个堆栈。

这种方法的问题是，我不能依靠正常的布局流程来定位卡片，这有很多原因。如果我使用位置：相对于扩展状态的卡，它们之间很好地流动。但是，向崩溃状态的过渡不是动画 – 只是在一瞬间从一个位置到另一个位置。这是合乎逻辑的，因为没有绝对的定位，浏览器显然不知道从哪里过渡。

到目前为止我是(Fiddle)：

CSS(仅限相关规则)：

div.deck-container {
    position: relative;
}
div.deck-container li {
    display: inline-block;
    position: relative;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
div.deck-container.collapsed li {
    position: absolute;
    left: 9px;
    top: 6px;
}
div.deck-container.collapsed li:first-child {
    left: 0;
    top: 0px;
}
div.deck-container.collapsed li:nth-child(2) {
    left: 3px;
    top: 2px;
}
div.deck-container.collapsed li:nth-child(3) {
    left: 6px;
    top: 4px;
}

HTML(仅相关标记)：

<div class="deck-container">
    <ul>
        <li>Card 1</li>
        <li>Card 2</li>
        <li>Card 3</li>
        <li>Card 4</li>
        <li>Card 5</li>
    </ul>
</div>

在我完美的世界中，将类折叠到div.deck-container会将卡片动画化为折叠位置，反之亦然，但似乎这是不可能的。请有人告诉我我错了