Firefox5でCSSのAnimationsが実装されましたが、ちょっとWebkit系と違うところがあるみたいです。

どう違うかというと、@keyframesのアニメーション名にクオートを付けるとWebkit系は動くけどFirefox5は動かないみたい。

DEMO

つまりこういうこと。（説明簡略化のためベンダプレフィックスは除いてます）

/* Webkitは動くけどFirefoxは動かない */
@keyframas 'hoge' {
    /* ... */
}

/* WebkitでもFirefoxでも動く */
@keyframas hoge {
    /* ... */
}

で、仕様はどうなってるか見てみると

CSS Animations Module Level 3

keyframes-rule: ‘@keyframes’ IDENT ‘{’ keyframes-blocks ‘}’;

って書いてあります。で、IDENTってところにキーフレーム名がくるわけですが、このIDENTってのが何かというは別の仕様に書いてあって

Syntax and basic data types

ここで定義されてるんですけど、IDENTはどうもクオートがつかない文字っぽいんですよね。なのでFirefoxでクオートがあると動かないのは仕様通りな気がします。ちなみにAnimationsの仕様書のExampleのコードはクオートありになってるんですが、これはExampleのコードが間違えなのかな。。？

さらに、Safariのドキュメント見てみると

Safari CSS Reference: Supported CSS Rules

keyframes-rule: ‘@-webkit-keyframes’ [ IDENT | STRING ] ‘{’ keyframes-blocks ‘}’;

って書いてあって、W3Cのほうの仕様書と違ってSTRINGが追加されてます。STRINGはクオートで囲む文字列のようなので、これに従うとWebkitのほうが正しいわけです。

まあまだ全然仕様が固まってない状態なのでこういうのもしょうがないんでしょうか。