Chrome 33 で opacity の transition を他のプロパティ(transform とか)と組み合わせて使うとうまく動かなくなってた。
Safari、Firefox では大丈夫っぽい。
opacity 単体での transition はイケるみたいだけど。
こんな感じでそもそも動作しなくなります。
See the Pen gnbel by johnykei (@johnykei) on CodePen.
この辺でもバグ報告あがってるみたいです。最新の Chrome Canary ではきちんと動いてました。もうすぐ直るのかな?
いつ直るかわからないのを待っている訳にもいかないので、解決策を調べました。
opacity: 0 から 1 となっているところを opacity: 0.01 から 1 にするときちんと動きます。本当力技な感じ。
こちらが上記の動かないサンプルの修正版です。
See the Pen Chrome 33 opacity transiton bug (fixed) by johnykei (@johnykei) on CodePen.
とりあえずはこの方法か、 opacity を使わない方法で対応する必要ありそうです。
※ 2014/5/22 追記
いつの間にか Chrome 35 になってましたが、この問題は解決されているようです。