automatic cookie bar pure css 工作正常但需要延迟

Question

我将这个纯粹的 css cookie 栏添加到我的网站并且一切正常，唯一的问题是当您进入网站时，您首先会看到 cookie 栏，然后 cookie 栏会上升最后下去。

怎么会看到我的 cookie 栏只在我进入我的网站时才下降，我想更改动画延迟，添加设置超时....但没有任何改变！！

这是原始代码笔，你可以看到我想在其中更改的内容

    www.codepen.io/natewiley/pen/uGtcD

这是我的代码

<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>

这是我的 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 中的行动画延迟：.8s；会给你结果

使动画持续时间更长。

animation: slideIn 4s;

加上一些动画流程的技巧：

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

automatic cookie bar pure css 工作正常但需要延迟

automatic cookie bar pure css works fine but need delay

html

javascript

css

jquery

navbar