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

时间:2015-06-04 14:08:00

标签: html css css3 animation css-animations

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

.wing1 
.wing2 

为什么它会以这种方式行事?是因为我在div中有动画我已经动画了吗?

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

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

任何见解都会很棒。

1 个答案:

答案 0 :(得分: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 */