自動クッキーバー純粋なCSSはうまく動作しますが、遅延が必要です

Question

私はこの純粋なcssクッキーバーを私のウェブサイトに追加しましたが、すべて問題なく動作します。クッキーバーが上がり、最後に下がります。

私のサイトに入ったときに私のクッキーバーだけが下がっているのを見て、私は猶予時間を変更し、設定時間を追加すると思った。ここ

は、元codepenであり、あなたは私がここでそれに

www.codepen.io/natewiley/pen/uGtcD 

を変更したいものを見ることができますここに私のCODE

<input class="checkbox-cb" id="checkbox-cb" type="checkbox" /> 
<div class="cookie-bar"> 


<div class="message"> 
This website uses cookies to give you an incredible experience. By using 
this website you agree to the 
<div class="buttoncookies-container"> 
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookieslinken" onclick="toggleOverlay()">terms</a> 
</div> 
</div> 

<div class="mobile"> 
This website uses cookies, 
<div class="buttoncookies-container"> 
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookiesshortlink" onclick="toggleOverlay()"> 
learn more 
</a> 
</div> 
</div> 


<label for="checkbox-cb" class="close-cb">X</label> 
</div> 

</div> 

IS MY CSSは

.cookie-bar { z-index:9996; position: fixed; width: 100%; top: 0; right: 0; left: 0; height: auto; padding: 20px; line-height:20px; text-align: center; background: #d2c6af; transition: .8s; animation: slideIn .8s; animation-delay: .8s; display: inline-block; } 

.mobile { display: none; } 

@keyframes slideIn { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } } 

.close-cb { border: none; background: none; position: absolute; display: inline-block; right: 20px; top: 10px; cursor: pointer; } 

.close-cb:hover { color:#fff;; } 

.checkbox-cb { display: none;} 

#checkbox-cb:checked + .cookie-bar { transform: translateY(-1000px); } 

Answer 1

削除していますCSSの行 のアニメーション遅延：0.8秒; はあなたに結果を与えます

アニメーションを最後に長くします。

animation: slideIn 4s; 

プラスアニメーションの流れにいくつかのトリックを追加します。

0% { 
    transform: translateY(-50px); 
} 
50% { 
    transform: translateY(-50px); 
} 
100% { 
    transform: translateY(0); 
}