CSSの移行がChromeで動作しない

Mozilla Firefoxで動作し、Google Chromeでは動作しないCSSコードがいくつかあります。 Mozillaのフォント色遷移でCSSの移行がChromeで動作しない

.lightBtn { 
 
    width: 500px; 
 
    height: 49px; 
 
    color: #000000; 
 
    background: white; 
 
    transition-duration: 0.4s; 
 
    -webkit-transition-duration: 0.4s; 
 
    display: inline-block; 
 
    -webkit-transition: all 0.25s; 
 
    transition: all 0.25s; 
 
} 
 
.lightBtn:hover { 
 
    background: black; 
 
    color: white; 
 
} 
 
.lightBtn span { 
 
    display: inline-block; 
 
    position: relative; 
 
    -webkit-transition: 0.25s; 
 
    transition: 0.25s; 
 
} 
 
.lightBtn span:after { 
 
    content: '>>'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    -webkit-transition: 0.25s; 
 
    transition: 0.25s; 
 
} 
 
.lightBtn:hover span { 
 
    padding-right: 25px; 
 
} 
 
.lightBtn:hover span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
}

<button class="lightBtn" ><span>Special effect</span></button> 
 

 
<p>Hover over the div element above, to see the transition effect.</p>

黒から白によく変更動作し、Chromeでそれだけで指定された時間後に白色に変化します。どうすれば修正できますか？

基本的な遷移を確認してもうまく動作しますが、ホバー上にアニメーションを追加している間は、色の遷移自体は機能しません。 This is animation I'm trying achieve。もともと、フォントの色の変化はありません。色の切り替えとアニメーションの両方が別々に動作しますが、組み合わせると、フォントの色の切り替えが機能しません（Google Chrome）。私が達成しようとしていることをMozillaで確認できます。

出典

2016-10-06 Karol Oleszek

おめでとうございます、あなたがこの記事でバグを発見しているようです:) –

はそれのために任意のバッジはありますか？ :) –

私はこの答えと興奮しないんだけど、多くは繰り返した後（ここでは他の回答のような擬似要素やエフェクトのいずれかを失うことなく）あなたのコードの下に切り詰めバージョンはmouseInとマウスアウトで一貫性のない結果を示しています試み。 3回目または4回目のホバーごとに、擬似要素の内容>>がすぐに表示され始め、ゆっくり固まります。残りの時間は、あなたが経験している遅れがあります。

合計では、これはWebKitレンダリングのバグのようです。私はここに1つを提出した：https://bugs.webkit.org/show_bug.cgi?id=163078だから、私はいくつかの進歩がそれで行われているかを確認します。

この縮小バージョンでは、Special effectテキストの表示が表示されなくなります。私はそのために遷移のタイミングを正規化しました。

.lightBtn { 
 
    width: 500px; 
 
    height: 49px; 
 
    color: #000000; 
 
    background: white; 
 
    display: inline-block; 
 
} 
 
.lightBtn:hover { 
 
    background: black; 
 
    color: white; 
 
} 
 
.lightBtn span { 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.25s; 
 
} 
 
.lightBtn span::after { 
 
    content: '>>'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.25s; 
 
} 
 
.lightBtn:hover span { 
 
    padding-right: 25px; 
 
} 
 
.lightBtn:hover span::after { 
 
    opacity: 1; 
 
    right: 0; 
 
}

<button class="lightBtn"><span>Special effect</span></button> 
 
<p>Hover over the div element above, to see the transition effect.</p>

出典

2016-10-06 20:27:35 TylerH

FFとGCの違いを調べると、WebKitは 'transition-duration'をとてもうまく処理していないことに気がつきました。私が気づいた主な問題は、文字と矢印の 'color'値の間の移行が遅れたことでした。したがって、WebKitエラーのように見えます。 –

-1

コードができるだけ基本的なものになるように他のすべてのものを取り除くとどうなりますか？これは機能しますか？もしそうなら、あなたはおそらく、特定の問題やそれらの行に沿ったものを並べ替える必要があるでしょう...あるいは、あなたのクロムバージョンが古くなっているかもしれません。

これはクロムとFFのbtwで私のために働く。

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.lightBtn { 
    width: 100px; 
    height: 100px; 
color: #000000; 
background: white; 
height: 49px; 
border: 2px solid white; 
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
transition-duration: 0.2s; 
-webkit-transition-duration: 0.2s; 
border-radius: 0px 8px 8px 0px; 
font-size: 16px; 
font-family: Audiowide; 
display: inline-block; 
transition: all 0.25s; 
cursor: pointer; 
} 
.lightBtn:hover { 
    background: black; 
    color: white; 
    border: 2px solid rgba(12, 1, 29, 0.87); 
    box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19); 
} 
</style> 
</head> 
<body> 


<span class="lightBtn"></span> 

<p>Hover over the div element above, to see the transition effect.</p> 

</body> 
</html>

出典

2016-10-06 19:19:45 user6866414

これは、遷移と疑似要素のいくつかの変更も含むOPのコードではありません。 – TylerH

さて、いくつかの物事を手放す：

まずあなたは、あなたが前の2つのプロパティに宣言された値を上書きしますtransition: all 0.25s;を宣言し、transition-duration: 0.2s;と-webkit-transition-duration: 0.2s;を宣言するために行きます。
transitionの値にallがあります。これはパフォーマンスが低下するため望ましくありません。
初期遷移の設定にtransition: all .25s;を設定し、プロパティをtransition-property: background-color, border, box-shadow, color;で上書きすると、移行はうまくいくはずです。

Hereは、機能コードを含むJSFiddleです。

ここで行われたことが何も機能しない場合は、既に他のユーザーから指摘されているように、ブラウザが古くなっている可能性があります。

出典

2016-10-06 19:21:49

** 1。**宣言の順序は重要ではありません。 ** 2 ** OPは 'background'、' color'、 'border'と' box-shadow'をアニメーションしたいので、 'all'はちょうどいいです*これらのプロパティを1つずつ宣言することはできますが、面倒です*） ** 3.イージング関数を定義する必要はありません（*デフォルト値*があります） –

または、 'all'はそれらをすべて宣言するための第2のプロパティを使います。このポイントは、意図していないプロパティの望ましくない遷移を避けるために 'all'を使用することを避けています。これは、今まで以上にOPを混乱させるかもしれません（例えば、*なぜボックスのサイズがこのように変化するのでしょうか？ –

十分にその正面にある:) –

-1

同じffとchromeのように見えます。

.lightBtn { 
 
    color: #000000; 
 
    background: white; 
 
    height: 49px; 
 
    border: 2px solid white; 
 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    transition-duration: 0.2s; 
 
    -webkit-transition-duration: 0.2s; 
 
    border-radius: 0px 8px 8px 0px; 
 
    font-size: 16px; 
 
    font-family: Audiowide; 
 
    display: inline-block; 
 
    transition: all 0.25s; 
 
    cursor: pointer; 
 
} 
 

 
.lightBtn:hover { 
 
    background: black; 
 
    color: white; 
 
    border: 2px solid rgba(12, 1, 29, 0.87); 
 
    box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19); 
 
}

<a class="lightBtn"> 
 
Hi guys! 
 
</a> 
 
<button class="lightBtn"> 
 
    Wassup 
 
</button>

出典

2016-10-06 19:30:13 Onur

あなたのコードはありますが、OPのコードはもっと複雑で、実際にはありません。 – TylerH

あなたが継続されます

transition-duration: 0.2s; 
-webkit-transition-duration: 0.2s;

0.25秒のための必要はありません

transition: all 0.25s;

持っている場合は、あなたのケースでは、それはあるかもしれませんあなたのブラウザのバージョン、それは私のために働くので、私はクロムを使用しています。これを追加して、役立つかどうかを確認してください。あなたは時間が効いていると言いますが、アニメーションがないので、まだWebkitプレフィックスが必要なので、

-webkit-transition: all 0.25s;

出典

2016-10-06 19:32:23

CSSの移行がChromeで動作しない

答えて

関連する問題