linear-gradientとtransition一緒に使う時にハマった罠

:hover時にtransitionでlinear-gradient使ったボタンがふわっと色変わるようにしてみたら、
ふわっとどころか:hoverのタイミングで一瞬背景が真っ白になった。
backgroundをショートハンドで書いてたのが原因ぽい。

qiita.rb

a {
    background-color:$startColor;
    background-image:linear-gradient(transparent,rgba($gradientColor,$opacity));
    // 面倒くさいのでベンダープリフィックスは省略＼(・∀・)／
a:hover {
    background-color:$endColor;
}

て感じにしたら直った。
いや、まぁ、よそのコード見ながら書き直しただけなんだけどもね。
firebugとかchromeの開発者ツールだと、勝手にショートハンドになってたりするのでしばらく気づかなかったというのもあるので、やっぱりちゃんとコード読まないとだめだなぁ、と思いました。