純粋なCSSの自動フェードアウトがFirefoxで機能しない

Question

私はクロムで期待どおりに動作しますが、Firefoxではまったく動作しません。

正直言って、私は何かを理解していないと思うし、何らかのバグや予期しない振る舞いのためにクロームで動作すると思う。

これは、（ブートストラップ3警告クラスに基づく）CSSルールです：私は何を期待

.alert { 
    transition: opacity 1s ease 5s; 
    -webkit-transition: opacity 1s ease 5s; 
    -moz-transition: opacity 1s ease 5s; 
    opacity: 0; 
} 

は、ページのロード時に、警告が表示され、かつ指定されたタイムアウトの後、それはフェードアウト、です、ちょうどchormeで起こるものです。しかし、firefox上では、直接不透明度0で表示されますが、これは私が望むものの反対です。

ありがとうございます。

Answer 1

からに移行する必要があります。あなたの最初の状態（あなたが共有したコードに基づいて）はopacity:0;です。要素がロードされるときに要素がopacity:1;になり、次にがopacity:0;に遷移するようにします。

JSで5秒後にクラスを追加すると、このクラスにopacity:0が追加されますが、純粋なCSSは使用されません。

おそらく、より良い選択肢は、CSSアニメーションを使用することです。しかし、あなたが問題に近づいている方法を変えなければならないでしょう。通常のCSSのロード状態はopacity:0;ですが、アニメーションを使用して読み込み時に不透明度を1に変更してから5秒間待ってから、不透明度を0にフェードインします。アニメーション全体が6秒間続き、アニメーションのタイミングを設定するためにパーセンテージを使用していた場合は、フェードアウトを83.33％（合計持続時間の5/6）に開始したいと考えています。

.alert { 
    -webkit-animation:fadeout 6s linear; 
      animation:fadeout 6s linear; 
    opacity:0; 
} 

@-webkit-keyframes fadeout{ 
    0%{opacity:1;} 
    83.33%{opacity:1;} 
    100%{opacity:0;} 
} 

@keyframes fadeout{ 
    0%{opacity:1;} 
    83.33%{opacity:1;} 
    100%{opacity:0;} 
}