Creating A Peek In Effect With Animate.css

I am using the excellent animate.css library for animations. I was wondering if its possible to create a 'peek in' and 'peek out' effect that is similar to the SlideIn/SlideOut but

Solution 1:

You can use the overflow property to hide all children overflowing the parent div. Add overflow:hidden; on the parent div like this :

body {
  margin: 0px;
  width: 100%;
}
.wrap {
  position:relative; 
  width:200px;
  overflow: hidden;
}
.header {
  position:absolute;
  bottom:1%;
  right:0%;
  background-color: red;
  color: white;
}
.animated {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  animation-name: slideOutRight;
}

<divclass="wrap"><imgsrc="http://dummyimage.com/200x200/000/fff" /><divclass="animated slideOutRight header">Stop Right There!</div></div>

On a side note, I also removed the inline styling and put it in the CSS stylsheet.