0

2つのスタイルを用意bodyしました。背景はすべてグラデーションで、タグにトランジション効果を追加します。

body{
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
    -webkit-transition: all 1s linear 0s;
}

body.orange{
    background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.7), rgba(35, 35, 35, 1) 60%);
}

ボタンを使用して2つのスタイルを切り替えます。問題は、スタイルの切り替えにトランジション効果がないことです。

しかし、背景色を「赤」や「黒」などの純粋な色に設定すると、トランジション効果が再び表示されます。

これがデモです

なぜこれが起こったのですか？グラデーションの背景色を切り替えてトランジション効果を持たせるにはどうすればよいですか？

4

1 に答える 1

2

CSSトランジションの仕様では、背景の色はアニメーション化できますが、グラデーションは画像として分類されるとされています。

グラデーショントランジション効果を取得したい場合は、たとえば、2つの要素を重ねて配置し、1つの要素の不透明度を0から1または1から0にアニメートすることによって、それを偽造する必要があります。

于 2012-08-03T02:51:47.490 に答える