39

ボタンにカーソルを合わせると、トランジションを開始するときに最初に白いフラッシュが表示されます。ボタンにcss3トランジションを適用すると、なぜちらつきが発生するのですか？私のブラウザはGoogleChromeです

こちらをご覧ください

<button>Log In</button>​

CSS：

button {
    background: #ff3019;
    background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
    border:1px solid #890000;
    display:block;
    margin:0 auto;
    width:200px;
    padding:5px 0;
    border-radius:8px;
    color:#fff;
    font-weight:700;
    text-shadow:0 1px 1px #000+50;
    box-shadow:0 2px 3px #000+150;
    -webkit-transition:background linear .5s;
}
button:hover {
    background:#ff3019;
}
button:active {
    background:#cf0404;
}

</ p>

4

8 に答える 8

116

ちらつきをなくしました。-webkit-backface-visibility: hidden;移行する要素に « » を追加します。ほら！

于 2012-10-22T22:31:01.697 に答える
12

Miguel は、迷惑なフラッシュを修正する backface-visibility について正しいです。ただし、変換スケールを使用しているため、スケーリング後にアニメーション化された SVG はシャープではありません。backface-visiblity プロパティを使用しないとシャープです。

そのため、グラフィックがぼやけた素敵なアニメーション、または画面が点滅する見栄えの良いグラフィックが得られます。

ただし、遷移するオブジェクトの親に次の行を追加できます。これにより、画面の点滅が修正され、スケーリング後にグラフィックがシャープにレンダリングされます。

-webkit-transform: translate3D(0, 0, 0);
于 2013-07-31T10:31:32.510 に答える
4

現在、修正されていない問題だと思います。私も遊んでいる前にこれに遭遇し、それを動作させることができませんでした。単色を使用することは問題ないようです、または背景画像でそれを偽造します。

ここでの同様の質問：グラデーション遷移のWebkitサポート

詳細：http ：//screenflicker.com/mike/code/transition-gradient/

于 2012-04-13T03:51:55.063 に答える
1

問題は、Google Chrome および Microsoft Edge Web ブラウザーの線形グラデーションの背景から無地の背景色に切り替えていることだと思います。この問題を修正するには、疑似クラス (この場合は :hover と :active) に同様の線形グラデーションの背景を追加します。あなたのjsfiddleで自分で試してみましたが、ボタンの上にカーソルを置いている間、レンダリングで点滅しませんでした。

        background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);

線形グラデーションの上部の色を変更して、ホバー効果に顕著な変化を与えました。

 button:hover {
background: -webkit-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
   }

Chrome または Microsoft Edge のボタンにカーソルを合わせたときに点滅する問題はなくなりました。これが役立つことを願っています。

于 2016-09-13T15:20:52.227 に答える
-1

このリンクは私のためにそれを修正しました。ちらつきのある要素の css に次の行を追加するだけです。

http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit

于 2013-09-14T07:55:26.883 に答える