web-dev-qa-db-ja.com

遅延と不透明度のあるCSSアニメーション

CSSアニメーションを使用して2秒後に要素をフェードインしようとしています。このコードは新しいブラウザーでは問題なく機能しますが、古いブラウザーでは「opacity：0」のために要素は非表示のままになります。

古いブラウザで表示したいのですが、javascriptをinvloveしたくありません。 CSSを使用して解決できますか？例えば。アニメーションをサポートしていないブラウザをどのようにターゲットにしますか？

CSS：

#element{
animation:1s ease 2s normal forwards 1 fadein;
-webkit-animation:1s ease 2s normal forwards 1 fadein;
opacity:0
}

@keyframes fadein{from{opacity:0}
to{opacity:1}
}

@-webkit-keyframes fadein{from{opacity:0}
to{opacity:1}
}

HTML：

<div id=element>som content</div>
cssanimationopacity
17
user1087110

要素自体に最初のopacityを設定せずに、@keyframes内に設定します。

#element{
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

この手法はアニメーションの遅延をなくし、すぐに実行を開始します。ただし、不透明度はアニメーションの約66％になるまで実際には変化しません。アニメーションは3秒間実行されるため、2秒間の遅延効果が得られ、1秒間フェードインします。

こちらの作業例を参照してください： https://jsfiddle.net/75mhnaLt/

古いブラウザで条件付きコメントを使用することも検討してください。 IE8およびIE9。

あなたの[〜＃〜] html [〜＃〜]のようなもの：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8 ie-7" lang="en-GB"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9 ie-8" lang="en-GB"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->

次のようなことができます：

.lt-ie9 #element {
    opacity: 1;
}
40
Michael Giovanni Pumo

エレメントのopacityをデフォルトごとに1に設定することをお勧めします（アニメーションをサポートしないブラウザーの場合）。次に、0秒でアニメーションを開始し、キーフレームを使用してアニメーションを遅らせます。

#element{
animation:3s ease 0s normal forwards 1 fadein;
-webkit-animation:3s ease 0s normal forwards 1 fadein;
opacity:1
}

@keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

http://jsfiddle.net/mg00t86v/2/

2
Raphael Müller

すべての主要なブラウザ CSS3アニメーションをサポートIE<10の顕著な例外を除いて、HTMLに条件付きコメントを使用できます。

<!DOCTYPE html>
<!--[if lte IE 9]><html class="lte-ie9"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html><!--<![endif]-->

したがって、特定のセレクタでIE<10クラス名を使用して、.lte-ie9に対してより具体的なルールを追加できます。

.lte-ie9 #element {
   opacity: 1;
   filter : alpha(opacity=100);
}

opacity: 0がanimation-delayに等しくなるようにすべてのアニメーションが制限されるため、最初の提案として最初のキーフレーム内で0を移動しませんfouc要素自体に対して）

1
fcalderan

これを試すことができます。

[〜＃〜] html [〜＃〜]

<div>some text</div>

[〜＃〜] css [〜＃〜]

div{
-webkit-animation: fadein 5s linear 1 normal forwards;
 }

@-webkit-keyframes fadein{
from{
   opacity: 0;
}
to{
    opacity: 1;
}
}
0
Parth Akbari