transitionとlinear-gradientの組み合わせで引っかかったこと

CSSメモ

transitionでhoverイベント仕込む時に引っかかったメモ

  • background:linear-gradientを使う時は、(center top,transparent,$end:rgba($endColor,$opacity) $startColor みたいな感じで、ベースに背景色べた塗りして、:hover時にbackground-colorだけ上書くようにしないとtransition効かないぽい。根拠はないけど、プリフィックスが怪しい気がする。
  • box-shadowは:hover時だけほわっとするようなときも、:hover前にbox-shadow自体は設定しておく。値は(0,0,0,0,rgba($hoverColor,0))とでもしておけばおk。とりあえず、hover時だけ急に出てくると、アニメーション効かず、ただのhover切り替えになっちゃう。
  • というより、backgroundをショートハンドで指定していたのが悪かったようだ。
  • background-color:$startColor; background-image:-webkit-gradient(linear, left top, left bottom,from(transparent),to($end)); ※$end = rgba($endColor,0.5)みたいに透過を与えておくとかしたら白くならない。ちっ。

しかし、やってるうちにhoverアニメーションする意味ないような気もしてきた……よ……？