<div id="cookies">
  <p>This is a cookies notification example!</p>
  <p><a href="#" id="close-cookies">Close Message</a></p>
</div>

<div class="content">
  <h1>Cookies notification example</h1>
  <p>This is a simple demo i've coded for a job I'm currently working on. I needed one of your favourite <code>slideUp</code> notifications to display a Cookies notification. Rcently i've been taking advantage of the <code>translate3d</code> property in CSS3 and I've used it again here. Chris Coyier talks a little about it in <a href="https://css-tricks.com/infinite-all-css-scrolling-slideshow/">this article</a>. The reason i'm using it is simple, The cookies message will appear on a <i>responsive web design</i> and thus i want the animation to look absolutely as smoth as possible.</p>
  <h2>CSS3 Animations and jQuery powered</h2>
  <p>I'm using <a href="https://jquery.com">jQuery</a> to fire up the animation on page load, and <a href="https://css-tricks.com/controlling-css-animations-transitions-javascript/">CSS3 animations</a> to perform  the cross browsered <i>slide</i> animation.</p>

  <p><strong>Thanks for checking the demo out, if you like it please heart and follow me on twitter @mattsince87</strong>.<p>  
</div>
/* ----------------
   Demo Styles
   ---------------- */
body, html {
  padding: 0;
  margin: 0;
  background: #fff;}

body {
  padding: 35px;}

.content {
  display: block;
  padding: 20px;
  background: #f8f8f8;
  border: 3px solid #e8e8e8;
  border-radius: 10px;}

  .content > p {
    font: normal 16px/22px sans-serif;
    color: #555;}
  
  .content > p a {
    color: #1d7df2;
    text-decoration: none;}
  
  .content > p a:hover {
    color: #b51db5;}

/* ----------------
   CodePen Styles
   ---------------- */

#cookies {
  display: none;
  width: 100%;
  height: 70px;
  padding-top: 30px;
  position: absolute;
  background: #fcf8e3 ;
  border-bottom: 2px solid #fbeed5;
  color: #c09853;
  text-align: center;
  top: 0;
  left: 0;
  z-index: 9999;}

  #cookies > p {
    margin: 0 0 10px 0;
    font-weight: bold;}
  
  #cookies > p a {
    color: #332b17;
    text-decoration: none;}

#cookies.display {
  display: block;

  /* Cross browser animation */
  -webkit-animation: cookies 1s 1; /* Chrome, Safari 5+ */
     -moz-animation: cookies 1s 1; /* Firefox 5-15 */
      -ms-animation: cookies 1s 1; /* IE9 */
       -o-animation: cookies 1s 1; /* Opera 12.00 */
          animation: cookies 1s 1; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */}

@keyframes cookies {
  0%   {
    -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
       -moz-transform: translate3d(0,-100px,0); /* Firefox */
        -ms-transform: translate3d(0,-100px,0); /* IE9 */
         -o-transform: translate3d(0,-100px,0); /* Opera */
            transform: translate3d(0,-100px,0);
  }
  100% {
    -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
       -moz-transform: translate3d(0,0,0); /* Firefox */
        -ms-transform: translate3d(0,0,0); /* IE9 */
         -o-transform: translate3d(0,0,0); /* Opera */
            transform: translate3d(0,0,0);
  }
}
@-webkit-keyframes cookies {
  0%   {
    -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
       -moz-transform: translate3d(0,-100px,0); /* Firefox */
        -ms-transform: translate3d(0,-100px,0); /* IE9 */
         -o-transform: translate3d(0,-100px,0); /* Opera */
            transform: translate3d(0,-100px,0);
  }
  100% {
    -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
       -moz-transform: translate3d(0,0,0); /* Firefox */
        -ms-transform: translate3d(0,0,0); /* IE9 */
         -o-transform: translate3d(0,0,0); /* Opera */
            transform: translate3d(0,0,0);
  }
}
@-moz-keyframes cookies {
  0%   {
    -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
       -moz-transform: translate3d(0,-100px,0); /* Firefox */
        -ms-transform: translate3d(0,-100px,0); /* IE9 */
         -o-transform: translate3d(0,-100px,0); /* Opera */
            transform: translate3d(0,-100px,0);
  }
  100% {
    -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
       -moz-transform: translate3d(0,0,0); /* Firefox */
        -ms-transform: translate3d(0,0,0); /* IE9 */
         -o-transform: translate3d(0,0,0); /* Opera */
            transform: translate3d(0,0,0);
  }
}
@-o-keyframes cookies {
  0%   {
    -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
       -moz-transform: translate3d(0,-100px,0); /* Firefox */
        -ms-transform: translate3d(0,-100px,0); /* IE9 */
         -o-transform: translate3d(0,-100px,0); /* Opera */
            transform: translate3d(0,-100px,0);
  }
  100% {
    -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
       -moz-transform: translate3d(0,0,0); /* Firefox */
        -ms-transform: translate3d(0,0,0); /* IE9 */
         -o-transform: translate3d(0,0,0); /* Opera */
            transform: translate3d(0,0,0);
  }
}

.close-cookies {
  -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
      -ms-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
  
  -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
     -moz-transform: translate3d(0,-100px,0); /* Firefox */
      -ms-transform: translate3d(0,-100px,0); /* IE9 */
       -o-transform: translate3d(0,-100px,0); /* Opera */
          transform: translate3d(0,-100px,0);
}
/* Cookies */
$(document).ready(function(){
  $("#cookies").addClass("display");
   $("#close-cookies").click(function(){ 
    event.preventDefault();
    $("#cookies").addClass("close-cookies");
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js