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