<div>
  <div>
     <label for="one" class="pointer-cursor">
      click/toggle notification
     </label>
   </label> 
  </div>

  <input type="checkbox" id="one" class="hidden" name="ossm">  
  <label for="one" class="alert-message">
    <strong> <i class="fa fa-heart"></i> Attention</strong> CSS is Awesome, click me  !! ...
    <span class="close">×</button>
  </label> 
</div> 

@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

html, body {
  background: #222;
  font-family: Verdana, sans-serif;  
}

.fa{
  line-height:30px;
  font-size:30px;
  display:inline-bloxk;
  width:35px;
  height:35px;
}
.hidden{
  display:none;
}

input[type=checkbox] + label {
  position:relative;
} 

input[type=checkbox]:checked + label {
  animation: closing 0.3s forwards ease-in-out,
             moving 0.3s forwards ease-in-out;
} 
.pointer-cursor{
   cursor: pointer; cursor: hand;
}
.close{

    float:right;
    color: #b94b45;
    cursor: pointer; cursor: hand;
}

.alert-message{
  background-color: #f2dede;
  border: 1px solid rgba(#34495e, 0.25);
  color: #b94b45;
  border-radius: 3px;
  line-height:30px;
  position: absolute;
  top: 0; left: 0;
  display:block;
  width:100%;
  padding: 12px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, .9);
  box-shadow: 0px 10px 50px rgba(0,0,0,.6);
  background:#34495e;
}

@keyframes closing {
  from {
    opacity: 1; 
  }
  to {
    opacity: 0;
  }
}

@keyframes moving {
  0%, 90% { top: 0; left: 0; }
  100%  { top: -100px; left: 0; }
}