这与使用overflow:hidden回答的Creating a peek in effect with animate.css有关，但不适用于列数：
我正在使用优秀的animate.css库来制作动画。我想知道是否有可能创建一个类似于SlideIn / SlideOut的“偷看”和“偷看”效果，但有以下区别：
slideOutRight
+-------------+ +-------------+
| | | |
| | | |
| +---------+ | +---+----+
| | anim | | | anim |
| +---------+ | +---+----+
| | | |
+-------------+ +-------------+
peekOutRight
+-------------+ +--------------+
| | | |
| | | |
| +---------+ | +----+
| | anim | | | an|
| +---------+ | +----+
| | | |
+-------------+ +--------------+
换句话说，不同之处在于peek不会超出父对象边界。我已经尝试将剪辑/剪辑路径添加到动画元素，但它看起来不像translate3d考虑到这一点。
animate.css的slideInRight / OutRight代码非常简单 - 它将X移动了100％ - 我想确保它在移出父框架时被裁剪。
我已经设置了一个codepen来说明这一点 - 感谢任何建议 http://codepen.io/pliablepixels/pen/pgxqOX
需要注意的是，它必须使用-column-count。，如您在codepen中看到的那样，当您使用列计数时，第二列不显示标题
添加了澄清为什么我需要它来处理列： 我需要打包框架，以便奇数尺寸的框架不按行排列。此codepen说明了使用flex-row与列计数的问题 - http://codepen.io/pliablepixels/pen/MKPLBp
如果切换到byrow，您会看到图像以行占据最大图像高度的方式对齐，这意味着如果缩小浏览器宽度，“D”将转到第3行而不是在“C”下。切换到列模式，它包装更好。