web-dev-qa-db-ja.com

CSSは5秒後に要素を自動的に非表示にします

ページの読み込みから5秒後に要素を非表示にすることはできますか？ jQueryソリューション があることを知っています。

私はまったく同じことをしたいのですが、CSSトランジションで同じ結果を得たいと思っています。

革新的なアイデアはありますか？または私はCSSの移行/アニメーションの制限を超えて尋ねていますか？

cssanimationtransition
40
Alfred

はい！

ただし、他の方法では依存するプロパティ（たとえば、display、ディメンションの変更、overflow:hiddenへの設定）をアニメーション化したり、トランジションを作成したりすることはできないため、すぐに考えられる方法ではできません。エレメントを正しく非表示にして、目に見えるスペースを占有しないようにします。

したがって、問題の要素のアニメーションを作成し、5秒後にvisibility:hidden;を切り替えるだけで、要素がまだDOMフローのスペースを占有しないように高さと幅をゼロに設定します。

FIDDLE

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -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;
    }
}

HTML

<div id='hideMe'>Wait for it...</div>
72
SW4

@ SW4の回答に基づいて、最後に小さなアニメーションを追加することもできます。

body > div{
    border:1px solid grey;
}
html, body, #container {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#container {
    overflow:hidden;
    position:relative;
}
#hideMe {
    -webkit-animation: cssAnimation 5s forwards; 
    animation: cssAnimation 5s forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}
<div>
<div id='container'>
    <div id='hideMe'>Wait for it...</div>
</div>
</div>

残りの0.5秒で不透明度属性をアニメートします。長さを変更する場合は、必ず数学を実行してください。この場合、5秒の90％で不透明度をアニメーション化するのに0.5秒かかります。

7
theredforest

もちろん、setTimeoutを使用してクラスまたは何かを変更し、遷移をトリガーするだけです。

HTML：

<p id="aap">OHAI!</p>

CSS：

p {
    opacity:1;
    transition:opacity 500ms;
}
p.waa {
    opacity:0;
}

ロードまたはDOMContentReadyで実行するJS：

setTimeout(function(){
    document.getElementById('aap').className = 'waa';
}, 5000);

ここでフィドルの例 。

5
Niels Keurentjes

fadeOutを試してみませんか？

$(document).ready(function() {
  $('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='plsme'>Loading... Please Wait</div>

fadeOut（Javascript Pure）：

純粋なJavaScriptでfadeOutエフェクトを作成する方法

2
KingRider