CSS3 のグラデーション背景をホバー時にアニメーションさせる簡単な方法

CSS の linear-gradient は transition で変化させることができないようで、困った挙句こんなやり方を発見。

以下、ロゴタイトル風に実装してみた。これは Neo's GitHub Pages のタイトル部分で使用している。

1つ目の #logo がソレ。linear-gradient で指定する色は透明度を 0.9 などにしておき、一緒に指定している background-color の白色が透けるようにしておく。んで、:hover 時に background-color の色に黒っぽい色を指定することで、これが transition する。

2つ目の #logo2 は実験。div 要素とその中の a 要素に別々のグラデーションを指定し、a 要素の opacity を transition で 0 に変えてやれば、div 要素のグラデーションが見えるようになるから、アニメーションっぽくなるんじゃないか？と思ったもの。でも opacity を使うと a 要素内のテキストも一緒に透明になってしまうのでちょっと使いづらいかと。スタイルのためだけに HTML の構成を変えたくはないのでこの状態で諦めることにした。

もうちょい複雑にアニメーションさせたいなら

background-size を大きめにしておいて、animation で background-position をズラすようにすると良いらしい。以下のサイトでアニメーションするグラデーションを作るジェネレーターが試せる。

これをベースにちょっと作ってみたけど、マウスオーバー時はいいものの、マウスアウト時にアニメーションしつつ元にもどってくれないので、チトイマイチ。

結局1番目の background-color を変えるやり方が一番シンプルでいいかな～と思った。