CSS-анимация: почему она не работает в Firefox при генерации с помощью autoprefixer

Question

Я использую autoprefixer и думаю, что ключевые кадры в Firefox не должны иметь префикс. (Используя последнюю версию FF38)

Мой оригинальный CSS

.blinking-cursor {
  font-weight: 100;
  font-size: 1rem;
  color: #2E3D48;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

<span class="blinking-cursor">|</span>

Сгенерированный CSS с помощью autoprefixer

.blinking-cursor {
  display:block;
  font-weight: 100;
  font-size: 30px;
  color: #2E3D48;
  -webkit-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}
@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

<span class="blinking-cursor">|</span>

Тогда почему курсор не анимируется, если он анимируется, если -moz был использован http://codepen.io/ArtemGordinsky/pen/GnLBq

Answer 1

Удалить цитаты " вокруг имен анимации в объявлении ключевых кадров. Имя анимации - это идентификатор, а не строка.

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}