Firefoxさん「'animation' の値をパース中にエラーが発生しました」

似たようなCSSアニメーションを大量生産したい時に。

for i in 1..10
  .anime-{i}
    animation-name 'anime-' + i

(コンパイル後)

.anime-1 {
  -webkit-animation-name: 'anime-1';
          animation-name: 'anime-1';
}
.anime-2 {
  -webkit-animation-name: 'anime-2';
          animation-name: 'anime-2';
}
.anime-3 {
  -webkit-animation-name: 'anime-3';
          animation-name: 'anime-3';
}...

などと書いていたのですが、これだとfirefoxとかIEで動きません。なまじchromeでは動くから困る。
ひたすらMDNとにらめっこしてようやく気づいた。

正解は

.anime-1 {
  -webkit-animation-name: anime-1;
          animation-name: anime-1;
}
.anime-2 {
  -webkit-animation-name: anime-2;
          animation-name: anime-2;
}
.anime-3 {
  -webkit-animation-name: anime-3;
          animation-name: anime-3;
}...

これで動きます。なまじchromeでは動くから(略
stylusはちょっと面倒ですが

for i in 1..10
  .anime-{i}
    animation-name 'anime-%s' % i

こうなります。他の書き方もあるぞって方は是非教えてください。
こんな書き方してる人がそもそもいないのか、ちょっとハマったし、そういう注意喚起も見当たらなかったのでメモ。