くろあん徒然日記

PCのネタが多い雑記。全てに関して『ド素人』が書き綴るTipsエントリの数々……信憑性はいかほどだろう?

Firefoxでアニメーションが動かなかった【CSS3】

webkitだけでいい、そう思っていた時期が僕にもありました……

今回は-moz-animationが動かなかったときの対処法

safari……動く!

chrome……動く!

firefox……動かない!

 

なんでや!

とセルフツッコミを入れたくなった午前7時ですおはようございます。

今回はCSS3の話。ろくにスタイルシートなんて使ったこと無いくせに……

 

ちょっくらCSSでアニメーションを作ってやらう、とこんなコードを書きました。拙いコードなのは許してください・ω・

そしたら、-moz-系の、つまりFirefoxでのアニメーションが全く動かない!

-webkit-系の、safariだったりchromeは動くんだけど……

調べたら、アニメーション名を指定する際のクォーテーションマーク(')は完全に無駄だったみたいです。

つまり、L.1, 6, 11, 16, 23, 28, 33, 38の 'anime' を、ただの anime にしてやれば良かったらしい。-moz-の部分だけ直せばいいのですが、統一感があったほうが好きなので。-webkit-系もクォーテーション外してもちゃんと動きます。

というだけ。

 

あと全然関係ない話で、最近知ったのですが、Firefoxではhtml5の<video>タグでmp4ファイルは再生できないらしいですね。あり得ん……なんだよOggフォーマットって。

 

さらに関係のない話ですが、この問題にぶち当たったとき、最初にCSS構文チェックをやってみよう……と思い立って、ググって探したら、こんなものが出てきました。

CSSチェッカとしては割と有名所らしいのですが、いざ検証してみたら……

f:id:kuroan:20130929073742p:plain

 

 

 

 

 

 

 

 

 

 

f:id:kuroan:20130929073409j:plain

もうちょっと頑張れよ構文チェッカ……

 

今回の参考: