web-dev-qa-db-ja.com

勾配遷移のWebkitサポート

Webkitがグラデーションの遷移をいつサポートするか誰もが知っているのだろうか？
たとえば、次のコードはChrome 6（grad-transitionがリンクであると仮定））では機能しません。

.grad-transition {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black));
     -webkit-transition: background-image .5s;
}
.grad-transition:hover {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
}
csswebkitcss-transitions
31
GZaidman

同じことをしようとしています。

現時点では、グラデーションをアニメートすることはできないと思います。

回避策を使用しています。グラデーションをアニメーション化する代わりに、背景画像に半透明のグラデーションを使用して、背景色をアニメーション化しています。

#button
{
    background-color: #dbdbdb;
    background-image: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%, rgba(255, 255, 255, 0.9)),
    color-stop(100%, rgba(0, 0, 0, 0.6))
    );
}

#button:hover
{
   background-color: #353535;
}

ここにもいくつかの例を挙げます： http://tylergaw.com/www/lab/css-gradient-transition-sorta/

50
thegaw

Background-positionを使用して、グラデーションが変化しているように見せることもできますが、実際にはグラデーションが移動しているだけです http://sapphion.com/2011/10/css3-gradient-transition-with- background-position /

10
Alan

小さなハックを使用してグラデーションでトランジションを作成することが可能です：

以下のコードは、最も暗い色の透明度を0.3に設定します。ホバーはこの色を別の色に設定します。透明度を移行できるため、同じ効果が得られます。

MozillaとIEの非移行バージョンも追加しました。

.menu li a {
  background-color: #ffffff; 
  background: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(rgba(238, 238, 238,0.3)));

  background: linear-gradient(left,#eeeeee, #ffffff);
  background: -moz-linear-gradient(180deg,  #eeeeee,  #ffffff);
}

.menu li a:hover {
  background-color: #006613;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: linear;

  background: linear-gradient(left, #006613, #eeeeee);
  background: -moz-linear-gradient(180deg,  #006613,  #eeeeee);
}
2
Chris Visser

少し前にこの質問をしましたが、私の質問を検索することで私の回答を見ることができます。彼らはまだこれを適切に行うことはできないと言っていますが、2つの異なるdivにグラデーションを設定してから、1つのdivを他のdivの上にフェードインしてエフェクトを作成することでそれを行うことができます。

1
android.nick

私はグラデーションの移行を可能にするJS libに取り組んでいます：線形グラデーションに既に使用できます。使用法：

    var button = $('#button');
    var targetGradientString = 'linear-gradient(rgb(247, 91, 52) 0%, rgb(240, 233, 93) 25%, rgb(43, 245, 12) 50%, rgb(24, 85, 240) 75%, rgb(166, 39, 230) 100%)';
    var targetElement = $('#target');

    button.click( function() {
        targetElement.gradientTransition(targetGradientString, 1500, 60);
    });

githubデモ

0
Рыбалов Павел