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

标签 html css animation css-animations

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

.wing1 
.wing2 

它到底为什么会这样?是因为我已经在制作动画的 div 中有动画吗?

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

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

任何见解都会很棒。

最佳答案

场景类中的 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 */

关于html - 为什么我的 CSS 动画会破坏我的溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30646104/

相关文章:

jquery - 在显示动画结束之前获取尺寸信息

java - 如何将变量从 HTML 传递到 Java?

javascript - 如何依次隐藏几个div?

html - 网站布局问题

javascript - 将 SQL 查询结果格式化为 Web 菜单

html - 使用前后的 Css

javascript - 动画完成后调用函数

wpf - Silverlight:Storyboard 的 Completed 事件处理程序延迟

javascript - 如何在 Javascript 中更改复选框的边框颜色

css - 如何在不更改 HTML 布局的情况下将 <tr> 分成多行?