coolio83000 coolio83000 - 1 year ago 79
CSS Question

automatic cookie bar pure css works fine but need delay

I added this pure css cookie bar to my website and all works fine, the only problem is that when you enter in the site, you can see FIRST the cookie bar, AND the cookie bar go up and go down at the end.

How can see my cookie bar only go down when i enter in my site, i thought to change de thenimation delay, add set time out .... but nothing change !!

here is the original codepen and you can see what i want to change in it


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

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



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

Removing the line in css animation-delay: .8s; will give you the result

Make the animation last longer.

animation: slideIn 4s;

Plus add some trick to animation flow:

0% {
  transform: translateY(-50px);
50% {
  transform: translateY(-50px);
100% {
  transform: translateY(0);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download