Анимация CSS с режимом заполнения, включая переход, не работает в Firefox должным образом

Это прекрасно работает в Chrome, но не в Firefox (вот онлайн-демонстрация ):

HTML

<div class="box"></div>

CSS

.box {
    background-color:blue;
    width:100px;
    height:100px;
    margin: 0 auto;
    transform: translate(-200px);
    animation-name: test;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    transition: all 0.25s ease;
}

.box:hover {
    border-radius: 100%;
}

@keyframes test {
    100% {
        transform: translate(0px);
    }
}

Если я удалю переход, он работает правильно. Похоже, что переход при активации при наведении удаляет состояние, установленное режимом заливки: вперед.

Есть ли способ обойти это в firefox?


html css css-animations css-transitions
person fmtoffolo    schedule 17.02.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Что ж, я добавил ключевой кадр для начальной точки 0%, чтобы заставить его работать:

@keyframes test{
  0% {
     transform: translate(-200px);
  }
  100% {
      transform: translate(0px);
  }
}

Используя вышеизложенное, вы можете удалить свойство transform из элемента .box.

Кроме того, для старых версий веб-браузеров рассмотрите возможность использования префиксов поставщиков, таких как -webkit- и -moz-, ... для @keyframes и других свойств CSS3.

PS: Я тестировал демо с FF 9.0.1. Эта проблема может появляться только в более ранних версиях веб-браузеров. На самом деле веб-браузеры пытаются исправить ваш плохой код, но победят только умнее!

РАБОЧАЯ ДЕМО

Обновлять

Чтобы исправить проблему рендеринга (когда начинается анимация), вам нужно изменить transition-property с all на конкретные свойства, которые вам действительно нужны. (border-radius в данном случае):

.box{
  animation-name: test;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  transition: border-radius 0.25s ease;
}

Проблема возникла из-за конфликта между animation и transition для свойства transform.

ОБНОВЛЕННАЯ ДЕМО

person Hashem Qolami    schedule 17.02.2014
comment
Я только что проверил это на ff, и наведение работает, но перед началом анимации есть рывки. - person Lokesh Suthar; 17.02.2014
comment
@Mr.Alien Спасибо, я добавил рекомендацию. - person Hashem Qolami; 17.02.2014
comment
@fmtoffolo Поскольку вы новичок в SO, если вы считаете, что ответ решил проблему, отметьте его как принятый, нажав на галочку. - person Mimi; 18.02.2014

arrow_upward
0
arrow_downward

У меня работает в Firefox. Я поместил ваш пример в JSFiddle, как вы показали в своем вопросе, и это сработало для меня.

person djangofan    schedule 17.02.2014
comment
Я тестировал это на FF на JSFIddle, и у него та же проблема. - person Lokesh Suthar; 17.02.2014