Firefox5.0以降でCSS3のanimationが動かない時の解決法

CSS3では、transitionやanimationといったプロパティがあります。
これらを利用することで、これまでJavascriptで行っていたような要素のアニメーションを行うことが出来るようになります。

これまで、animationはwebkitエンジンのブラウザでベンダープレフィックスをつけることで動作していましたが、
Firefox5以降、animationが動作するようになりました。
そこで早速試してみたときに全く動かないトラブルがあったので、
解決法を備忘録として書き残しておきます。

その時の僕は、遂に、Firefoxでanimationが動く日が来たのかーとニヤニヤしながら、
以下のようなコードを打ち込んでいました。

  @-moz-keyframes "move" {
      from{background-position:0 0;}
      to{background-position:75px 0;}
    }
   #move_element{-moz-animation:"waving" 6s linear 6s infinite;  animation:"move" 6s linear 6s infinite;}

・・・あれ、全く動かない。
なぜだ…ベンダープレフィックスのwebkitをmozに置き換えただけなのに…
一括指定が悪いのかと思い、アニメーションだけしてみたりしましたが動きませんでした。
そこで、mozillaのドキュメントを直接見に行きました。

animationっと・・・あれ...

  h1 {
    -moz-animation-duration: 3s;
    -moz-animation-name: slidein;
  }

  @-moz-keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%
    }
    
    to {
      margin-left: 0%;
      width: 100%;
    }
  }

keyframe nameの書き方が違う…

結論

@-moz-keyframes "move"を@-moz-keyframes move、
animation:"move"をanimation:moveにしたら動きました。
Firefoxではanimation-nameから『""』を外す、Webkit系ブラウザでは『""』をつけることで動作するようですね。