为什么我的 CSS 动画会破坏我的溢出？

Question

我花了很长时间试图解决这个问题，但我看不出这是导致此错误的任何原因。你可以看到，太阳和陆地在我的场景 div 之外是可见的，它有一个隐藏的溢出。现在，如果您转到下面的类并注释掉该动画，它将正确显示。

.wing1 
.wing2

它到底为什么要这样？是不是因为我在 div 里面有动画我已经在制作动画了？

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

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

任何见解都会很棒。

Answer 1

CSS 在你的场景中 class

 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 */

为什么我的 CSS 动画会破坏我的溢出？

Why is my CSS animation breaking my overflow?

html

css

animation

css-animations