Сделал на псевдо-элементах cssdeck.com/labs/bezsdjwq
Но все-равно последняя итерация работает не правильно.
Этот пример работает так:
Есть задний блок(красный/after), его перекрывает передний(белый/before). Растягиваем и сжимаем красный блок что бы добиться похожего эффекта.
В кейфрейме можно указывать временной отрезок в процентах, я это использовал, и после несложных расчетов получилось что-то вроде:
Есть 4 элемента, по одному с каждого края. Дальше по временных отрезках.
0% не делаем ничего.
20% увеличиваем ширину верхнего на 100%, при этом отступ от левого края остается 0.
40% уменьшаем ширину верхнего и увеличиваем отступ слева до 100%. Для правого элемента высота - 100%.
60% для правого уменьшаем высоту, увеличиваем отступ сверху до 100%. Для нижнего увеличиваем ширину - 100%.
80% ширина нижнего к нулю, отступ справа. Высота левого - 100%.
100% Высота левого - 0, отступ снизу - 100%.
Уменьшить к двум элементам(верх-низ/бока), у меня пока не получилось.
Через приведение типа - поля точно останутся
Мне интересно именно что бы иметь что то вроде неизменяемой структуры, на уровне библиотеки, так как язык такого не предоставляет