0

I have an information bar that is displayed on the page. The problem I am facing here is that after this info bar is animated, logout link in the container div is not clickable. I tried by setting the visibility to hidden while transforming but, it seems not to work. 

.container{
  width: 100%;
  height:100%
}
.links{
 float: right;
}
.container .infoBar {
-webkit-transform: translateY(-50px);
-webkit-animation: seeSaw 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: seeSaw 2.5s 1.0s 1 ease forwards;
}

  .infoBar{
position: absolute;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: #fde073;
text-align: center;
line-height: 2.5;
overflow: hidden; 
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow:    0 0 5px black;
box-shadow:         0 0 5px black;
  }

@keyframes seeSaw{
 0%, 100% { transform: translateY(-50px); }
10%, 90% { transform: translateY(0px); }
}

.complete {
  background-color: #e7f3da;
  color: #7db742;
  border: 1px solid #7db742;
}
<div class="container">
  <div class="links">
   <a href="#">logout</a>
  </div>
  <div class="infoBar complete">Success</div>
</div>
Kapil gopinath
  • 1,053
  • 1
  • 8
  • 18
  • I have solved this. Anybody who is facing this issue can make use of the above code snippet. – Kapil gopinath Feb 17 '19 at 06:55
  • Solution was that to the infobar class I added translateY(-50px) so that after animation ends the Infobar div will come back to its initial position and reposition itself to (top)-50px thereby giving a hidden effect. – Kapil gopinath Feb 17 '19 at 07:07

0 Answers0