Search the Community

В общем интересная штука нарисовалась. Вот пример. Есть элемент, который в процессе работы сайта неким образом перемещается, для его плавного перемещения используется свойство transition: transform; Именно transform т.к. оно не вызвыает repaint и reflow. Так же при загрузке страницы этот элемент должен выезжать. Для этого используется свойство animation, в @keyframes которой свойство transform изменяется from -100% to 0. По идее при загрузке страницы animation должна запуститься, отработать независимо от заданного свойства transition, а уже потом в процесе работы сайта, когда элементу назначается какой-то класс изменяющий свойство transform, элемент должен перемещаться с учетом установленного свойства transition. Во всех браузерах так и есть, кроме FF. В фаерфоксе при первом запуске страницы свойства animation и transition "накладываются" друг на друга и вызывают глючное поведение элемента В примере при первом запуске в FF видно, что элемент дважды анимируется. Кроме того я сделал две кнопки, вызывающие удаление и повторное добавление элемента на страницу (одна добавляет элемент сразу, вторая через пол секунды - для того чтобы исключить какое либо кеширование элемента браузером или еще что-то в этом роде, мало ли как браузер оптимизирует JS инструкции). И при новом добавлении элемента такого глюка уже нету. Само перемещение элемента (доступно при клике на него) работает как надо. В общем самому мне не разобраться, подскажите, можно ли что-то сделать с начальной анимацией чтоб она работала нормально (без применения костылей на js, их я временно уже сам реализовал) и является ли данное поведение багом?