Почему не работает CSS3 в некоторых браузерах?

Question

[Евгений Низамиев]

В общем, сделал одну анимацию, а она работает исключительно в хроме.
Вот код cssdeck.com/labs/bihusp1e

Answer 1

[mixator]

Насколько я понял, это происходит из-за разных методов обработки bottom, top, right, left в хроме и других движках.

cssdeck.com/labs/cv5j2bii - пример как работает не на псевдо-элементах и с указанными bottom, top, right, left. Работает немного не правильно, есть идеи как сделать правильно?

Comments

[Евгений Низамиев]

идей нет... вообще не понятно как у вас они друг за другом воспроизводятся

[mixator]

В кейфрейме можно указывать временной отрезок в процентах, я это использовал, и после несложных расчетов получилось что-то вроде:
Есть 4 элемента, по одному с каждого края. Дальше по временных отрезках.
0% не делаем ничего.
20% увеличиваем ширину верхнего на 100%, при этом отступ от левого края остается 0.
40% уменьшаем ширину верхнего и увеличиваем отступ слева до 100%. Для правого элемента высота - 100%.
60% для правого уменьшаем высоту, увеличиваем отступ сверху до 100%. Для нижнего увеличиваем ширину - 100%.
80% ширина нижнего к нулю, отступ справа. Высота левого - 100%.
100% Высота левого - 0, отступ снизу - 100%.

Уменьшить к двум элементам(верх-низ/бока), у меня пока не получилось.

[mixator]

Сделал на псевдо-элементах cssdeck.com/labs/bezsdjwq
Но все-равно последняя итерация работает не правильно.

Этот пример работает так:
Есть задний блок(красный/after), его перекрывает передний(белый/before). Растягиваем и сжимаем красный блок что бы добиться похожего эффекта.

[mixator]

Немного подправил, получилось почти то что надо.
cssdeck.com/labs/qt6ya1o0

[Евгений Низамиев]

@mixator но опять-же оно работает только в хроме... Не пойму что за фигня такая...

[mixator]

Работает в хроме, мозиле 29, ие 11.

[Евгений Низамиев]

@mixator не хочет работать в опере(12.16) и сафари.
Сижу под маком

[mixator]

@RadiationX, попробуйте добавить префиксы

[Евгений Низамиев]

@mixator спасибо за помощь)

[mixator]

@RadiationX обращайтесь (=

Answer 2

[Rsa97]

Firefox 26.0, Linux - в белом прямоугольнике сверху и справа бегающие красные полоски.

Comments

[Евгений Низамиев]

а, ну да, файерфокс еще что-то пытается делать.

Answer 3

[RUSgrigoryev]

caniuse.com/#feat=css-animation

Comments

[Евгений Низамиев]

префиксы стоят, анимация не работает.

[Миша Васильев]

И что вы этим хотели сказать? Каким образом эта табличка объясняет разное поведение в Firefox и webkit-based браузерах?

[RUSgrigoryev]

@vasilyev для начала нужно убрать лишние префиксы, потом еще напишу

[Евгений Низамиев]

@RUSgrigoryev лишние?

[Миша Васильев]

@RUSgrigoryev ну уж не томите, я оставил -webkit- префикс и без префикса. И все равно работает по-разному. Что же говорит табличка теперь?

[Миша Васильев]

@RadiationX не спугните!