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チェッカとしては割と有名所らしいのですが、いざ検証してみたら……
もうちょっと頑張れよ構文チェッカ……
今回の参考: