CSS-переходы, смешивающие абсолютное и относительное позиционирование

Краткая и приятная версия:

Можно ли объединить position: relative и position: absolute с плавными переходами CSS?

Подробная версия:

Я создаю небольшой виджет (я называю его Deck), который я не хочу, чтобы он мог свернуться и расширенное состояние. Пока все хорошо, все работает нормально.

Переключение между двумя состояниями, естественно, требует анимации перехода. Это тоже работает, но не так, как хотелось бы. Я бы хотел использовать CSS-переход вместо использования абсолютного позиционирования с помощью JavaScript, как сейчас.

Увы, текущий сценарий таков: в развернутом состоянии карты в колоде всегда позиционируются абсолютно, их положение вычисляется на лету, когда они добавляются в колоду. При сворачивании первые четыре складываются каскадом, а остальные кладутся поверх четвертой карты. Визуально имитируя стопку.

Проблема с этим подходом заключается в том, что я не могу полагаться на нормальный процесс компоновки для размещения карточек, что отстой по многим причинам. Если я использую position: relative для карт в развернутом состоянии, они плавно переходят одна за другой. Но переход в свернутое состояние не анимируется - просто мгновенно переключается из одного положения в другое.Это, конечно, логично, поскольку без абсолютного позиционирования браузер явно не знает, откуда перейти.

На данный момент у меня есть следующее ( 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 (только релевантная разметка):

    

        
Card 1
        
Card 2
        
Card 3
        
Card 4
        
Card 5
    

В моем идеальном мире добавление class collapsed to div.deck-container оживит карты в их свернутые позиции и наоборот, но кажется, что это невозможно. Пожалуйста, скажите мне, что я ошибаюсь.