当使用@keyframes 为背景设置动画时，Webkit 忽略 overflow:hidden

Question

我正在尝试使用边框半径缩放被圆圈遮盖的背景图像。经过一些研究，我了解到似乎存在一个关于边界半径屏蔽绝对定位元素的 webkit 错误。

.circle{
    overflow:hidden;
    border-radius:50%;
    width:407px;
    height:407px;
}

.circle .image{
    width:407px;
    height:407px;
    background:url(http://vurtmedia.co.uk/prev/wp-content/themes/EightDegree/images/_overlay/logo-bg3.png) no-repeat 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center; 
     -webkit-animation: animatedBackground 5s ease-out infinite;
        -moz-animation: animatedBackground 5s ease-out infinite;
        animation: animatedBackground 5s ease-out infinite;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
}

@keyframes animatedBackground {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(4);
-moz-transform: scale(3.5);
transform: scale(3.5);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes animatedBackground {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(4);
-moz-transform: scale(3.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
}

（在 firefox 中完美运行）如果你在 css 中取消关键帧动画，你会看到外部 div 掩盖了内部元素，在 webkit 中也是如此。当应用动画时，溢出不再有效。

这是我试图在所有内容（包括 webkit）上完美工作但仅在悬停时使用过渡效果的另一个示例：http://jsfiddle.net/dhepce3p/

.circle .image{
    width:407px;
    height:407px;
    background:url(http://vurtmedia.co.uk/prev/wp-content/themes/EightDegree/images/_overlay/logo-bg3.png) no-repeat 0 0; 
   background-size: 100% 100%;
    transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-ms-transition: background-size 2s ease-in;
-o-transition: background-size 2s ease-in;
-webkit-transition: background-size 2s ease-in;
}

.circle .image:hover{
    background-size: 150% 150%;

}

有没有办法以某种方式结合这些技术的力量，甚至是另一种解决方法？

我也读过关于在元素上使用 :after 以及在顶部放置一个带有冲孔圆的白色正方形作为 hack，但这需要经过另一个纹理，因此需要透明！

Answer 1

当您遇到已知错误时，您可能会重新考虑所使用的技术并选择一个可行的技术。大多数时候有几种方法可以达到类似的视觉效果。

在这里我要说的是，删除 transform:thingy bob ; 并使用 background-size 代替。在这种情况下，除了绝对定位甚至可能不相关。

尽量简单。 http://jsfiddle.net/5m1n5xeg/4/

.circle {
    overflow:hidden;
    border-radius:50%;
    width:407px;
    height:407px;
}
.circle .image {
    border-radius:inherit;
    width:407px;
    height:407px;
    background:url(http://vurtmedia.co.uk/prev/wp-content/themes/EightDegree/images/_overlay/logo-bg3.png) no-repeat 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    background-position: center center;
    -webkit-animation: animatedBackground 5s ease-out infinite;
    -moz-animation: animatedBackground 5s ease-out infinite;
    animation: animatedBackground 5s ease-out infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes animatedBackground {
    50% {
        background-size: 350% 350%;
    }
}
@-webkit-keyframes animatedBackground {
    50% {
        background-size: 350% 350%;
    }
}

<div class="circle">
    <div class="image"></div>
</div>

实际上，我不确定您是否需要所有 those prefix :)

当使用@keyframes 为背景设置动画时，Webkit 忽略 overflow:hidden

Webkit ignoring overflow:hidden when background is animated with @keyframes

css

keyframe