Проблема с css3 анимации?

Question

[Alibek Kulseitov]

Анимирую сайт, и тут столкнулся с проблемой. Когда пытаюсь применить анимацию на элементы к которыми были применены трансформации не правильно анимируются.
То есть вот ссылка на сайт
Посмотрите на ромбовидный блок к которому было применено rotate.
По завершению анимации вы увидите баг.

Comments

[Максим]

я всю страничку облазил но так и не увидел этот косяк !

[Максим]

Максим Жаров: а вот на diis мне понравился логотип

[Alibek Kulseitov]

Максим Жаров: всю страницу не надо) я же указал ссылку с якорем. Посмотри внимательнее картинка сначало увеличивается а потом резко становится ромбовидной формы. А должна изначально быть ромбовидной)

[Максим]

Алибек Кулсеитов: Алибек ,хоть лопни но нету там такого поведения , или я в шары ....

[Aleksandr]

Максим Жаров: проблема в FF. В Chrome данный блок вообще не выводится

[Максим]

Александр Котов: ааа , а то я думал я в шары ужедолб... ,

Answer 1

[Aleksandr]

Я могу предположить, что данная проблема возникает из-за того, что в keyframe у вас прописано
transform: scale3d()
А выше прописывается
transform: rotate()
попробуйте прописать
transform: scale3d() rotate()
То бишь в начала отрабатывает одно свойство, потом другое.

Comments

[Alibek Kulseitov]

Да) ты прав) так и сделал теперь нормально