2

http://jsfiddle.net/nicktheandroid/PXdXr/1/

2つの異なるグラデーションの間でアニメーション化し、1つをホバーでフェードインさせます。私の例は何が起こるべきかを示していますが、それは即座に起こります、私はそれがそれらの間でフェードすることを望みます。

ここでの参考のためにSO（これはすべてjsfiddleにあります）：

.outerBorder {
    display:inline-block;
    /*border: 3px solid #4d4d4d;*/

   background: #4d4d4d; /* Old browsers */
background: -moz-linear-gradient(top, #4d4d4d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* W3C */



-webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
transition: background 1000ms ease-in-out;

}

.outerBorder:hover {
    display:inline-block;
    /*border: 3px solid #4d4d4d;*/

background: #d6f9ff; /* Old browsers */
background: -moz-linear-gradient(top, #d6f9ff 0%, #9ee8fa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6f9ff), color-stop(100%,#9ee8fa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6f9ff', endColorstr='#9ee8fa',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* W3C */

}

.innerBox {
    width:300px;
    height:200px;
    margin:5px;
    background-color:#fff;
}
4

2 に答える 2

4

リックが述べたように、グラデーションアニメーションはまだサポートされていません。

ただし、CSSトランジションの上に半透明のグラデーションを適用してから、背景色をアニメーション化することもできます（効果は非常に似ています）。

.outerBorder {
    display:inline-block;
    /*border: 3px solid #4d4d4d;*/  
    -webkit-transition: background-color 1000ms ease-in-out;
    -moz-transition: background-color 1000ms ease-in-out;
    -o-transition: background-color 1000ms ease-in-out;
    transition: background-color 1000ms ease-in-out;
    background-color: #4d4d4d;
}

.outerBorder:hover {
    background-color: #b4d7dd; 
}

.innerBox {
    width:300px;
    height:200px;
    padding:15px;
    background-color:#fff;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255, 0))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
   background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
   background: linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* W3C */
}

JSFiddle： http: //jsfiddle.net/NAVYX/

于 2011-07-08T01:27:21.987 に答える
1

グラデーションアニメーションはまだサポートされていません。jQueryを使用しているので、 cssHooksを使用してこの機能を記述できます。または、より単純な方法で、一方のグラデーションをもう一方のグラデーションの上に配置し、不透明度をアニメーション化してフェードをシミュレートします。

于 2011-07-07T20:05:49.660 に答える