CSSの非表示要素は、5秒がそれを示して

Question

た後、私はこの質問CSS Auto hide elements after 5 seconds

を発見し、私はこれのopositeを行う方法を知っておく必要があります。 基本的には：要素隠さ

-wait 5秒

-Show要素

と

-page負荷私は任意のヘルプがいいだろうCSSで非常に良いではありませんよ！

#thingtohide { 
    -moz-animation: cssAnimation 0s ease-in 5s forwards; 
    /* Firefox */ 
    -webkit-animation: cssAnimation 0s ease-in 5s forwards; 
    /* Safari and Chrome */ 
    -o-animation: cssAnimation 0s ease-in 5s forwards; 
    /* Opera */ 
    animation: cssAnimation 0s ease-in 5s forwards; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

@keyframes cssAnimation { 
    to { 
     width:0; 
     height:0; 
     overflow:hidden; 
    } 
} 
@-webkit-keyframes cssAnimation { 
    to { 
     width:0; 
     height:0; 
     visibility:hidden; 
    } 
} 

Answer 1

この単純な解決策を試してみてください。

#showMe { 
 
    animation: cssAnimation 0s 5s forwards; 
 
    visibility: hidden; 
 
} 
 

 
@keyframes cssAnimation { 
 
    to { visibility: visible; } 
 
}

<div id='showMe'>Wait for it...</div>

また、不透明度を使用することができます。これは、文字通りの端部との間の特性をスワップアウトしてから状態を開始した場合である

#showMe { 
 
    animation: cssAnimation 0s 5s forwards; 
 
    opacity: 0; 
 
} 
 

 
@keyframes cssAnimation { 
 
    to { opacity: 1; } 
 
}

<div id='showMe'>Wait for it...</div>

Answer 2

このようなものを実行できます。これにより、opacityが0に設定され、数秒後に100％に戻されます。このオプションを使用すると、どのくらいの速さで表示するかを細かく調整することができ、要素の不透明度とその時間枠をいつ制御できるかを制御できます。

#showMe { 
 
    opacity: 0; 
 
    -moz-animation: cssAnimation 5s; 
 
    /* Firefox */ 
 
    -webkit-animation: cssAnimation 5s; 
 
    /* Safari and Chrome */ 
 
    -o-animation: cssAnimation 5s; 
 
    /* Opera */ 
 
    animation: cssAnimation 5s; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes cssAnimation { 
 
    99% { 
 
     opacity: 0; 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
    } 
 
} 
 
@-webkit-keyframes cssAnimation { 
 
    99% { 
 
     opacity: 0; 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
    } 
 
}

<div id='showMe'>Wait for it...</div>