cssのグラデーションでIEのことも考慮すると,backgroundにlinear-gradientなどを適用させると思うのですが、
hoverしたときに単色→グラデーションにアニメーションさせるには一番容易な方法は何でしょうか...?
一つのグラデーションをcssアニメーションさせるとなるとbackground-imageにtransitionは適用できないので、以下の方法が一般的だと思いますが、
以下はただの例です。
.button{ background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c); background-size: 600% 600%; animation: AnimationName 10s ease infinite; } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
このやり方だとおそらく単色からの変化はできそうにないと思っております。
もし、単色のbackgroundからグラデーションにアニメーションしつつ切り替えるにはcssだけでは完結できないものなのでしょうか...?
やりたいこと
background: #fff; ↓ [hoverしたとき] background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c)
回答3件
あなたの回答
tips
プレビュー