css - 背景色なしからグラデーションへのCSSの移行

Question

背景のないdivからグラデーションの背景のあるdivに移行することは可能ですか？

div { background-color:none;}

div:hover {
background:#D74413; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D74413), to(#8A2D0D)); 
background: -webkit-linear-gradient(top, #D74413, #8A2D0D); background: -moz-linear-gradient(top, #D74413, #8A2D0D); 
background: -ms-linear-gradient(top, #D74413, #8A2D0D); background: -o-linear-gradient(top, #D74413, #8A2D0D);
}

Answer 1

グラデーションのアニメーション化は単純ではなく、背景のサイズとグラデーションの位置を調整する必要があります。次に例を示します。

http://www.impressivewebs.com/animating-css3-gradients/

私にとってうまくいく簡単な回避策は、divの子にグラデーションを配置し、次のように不透明度をアニメーション化することです:

http://jsfiddle.net/willemvb/rWpZN/

---

HTML:

<div id="container">
  <div id="back"></div>
</div>​

CSS (webkit 用ですが、バリアントを追加すれば他の最新ブラウザーでも機能します)

#container { 
  position: relative;
  width: 500px; height: 500px;
  background: transparent;
}    

#back { 
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  opacity: 0;
  background: -webkit-linear-gradient(top, #ccc, #999);     
  z-index: -1;
  -webkit-transition: opacity 3s ease-out;
}    


#container:hover #back {
  opacity: 1;
}​

Answer 2

このサイトを使用してください:

究極の CSS グラデーション ジェネレーター