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 with the following difference:

                     slideOutRight
   +-------------+     +-------------+
   |             |     |             |
   |             |     |             |
   |   +---------+     |         +---+----+
   |   |  anim   |     |         |  anim  |
   |   +---------+     |         +---+----+
   |             |     |             |
   +-------------+     +-------------+

                      peekOutRight
   +-------------+     +--------------+
   |             |     |              |
   |             |     |              |
   |   +---------+     |         +----+
   |   |  anim   |     |         |  an|
   |   +---------+     |         +----+
   |             |     |              |
   +-------------+     +--------------+

In other words, the difference is that peek does not go out of the parent object boundaries. I've tried adding clip/clip-path to the anim element but it does not look like translate3d takes that into account.

The slideInRight/OutRight code of animate.css is pretty straighforward - It's moving X by 100% - I'd like to make sure it gets cropped as it moves out of the parent frame.

I've setup a codepen to illustrate this in action - would appreciate any advice http://codepen.io/pliablepixels/pen/pgxqOX

body {
  margin: 0px;
  width: 100%;
}
.header {
  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: visible;
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  animation-name: slideOutRight;
}

<div style="position:relative; width:200px;overflow:hidden">
  <img src="http://dummyimage.com/200x200/000/fff" />
  <div style="position:absolute;bottom:1%;right:0%" class="animated slideOutRight header">Stop Right There!</div>
</div>

回答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;
}

<div class="wrap">
  <img src="http://dummyimage.com/200x200/000/fff" />
  <div class="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.

来源：https://stackoverflow.com/questions/35254556/creating-a-peek-in-effect-with-animate-css

标签

html

css

css3

css-animations