Почему не работает css анимация в firefox?

Question

[istasiik]

Здравствуйте! В файрфоксе появился баг в css анимации (во всех остальных такого нет):

2) Я включаю скрипт, который добавляет к элементу следующую анимацию.

@-webkit-keyframes active {
  0% {
  }
    
    40% {

      min-width: 107px;

  }
    
    50% {
      min-width: 96px;

  }
    
    60% {
      min-width: 105px;

  }
    
   70% {
      min-width: 100px;

  }
    


  100% {
      border-color: #71DE04;
      color: #71DE04;
      min-width: 100px;
  }
}

@keyframes active {
  0% {
  }
    
     40% {

      min-width: 107px;

  }
    
     50% {
      min-width: 98px;

  }
    
     60% {
      min-width: 102px;

  }
    
     70% {
      min-width: 100px;

  }


  100% {
      border-color: #71DE04;
      color: #71DE04;
      min-width: 100px;

  }
}

.active {
  -webkit-animation-name: active;
    -moz-animation-name: active;
          animation-name: active;
}

У этого элемента нет постоянной ширины, поэтому если его ширина меньше 110x с помощью min-width он несколько раз сокращается и меняет цвет. Везде это работает, кроме файрфокса. В файрфоксе он только меняет цвет. В чем может быть проблема?

Answer 1

[istasiik]

Решение - добавить любой min-width в изначальный класс элемента.