为什么我的CSS动画会中断溢出？

Question

我花了很长时间尝试找出答案，但我看不出任何原因导致此错误。 您可以看到，在我的场景div之外可见了太阳和土地，那里隐藏着大量的东西。 现在，如果您进入下面的课程并注释掉该动画，它将正确显示。

.wing1 
.wing2 

为什么在地球上这种行为呢？ 是因为我已经在制作动画的div中有动画吗？

.bird *is animated*
    .wing1 *is animated*
    .wing2 *is animated*

笔： http ： //codepen.io/LukeD1uk/pen/LVWXmB

任何见识都会很棒。

Answer 1

场景类中的CSS

 position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */