CSS动画破坏剪辑路径

Question

我很苦恼以下情况：我有一个元素，它有一个剪辑路径来掩盖它的内容。这稍后用于动画，揭示内容。然而，里面还有另一个元素，它有自己的动画，由于动画而没有被屏蔽。

看一看这里：https://jsfiddle.net/wne2z1m4/

所以基本上：-webkit-clip-path:inset(-10% 50% 98% 50%);和animation:animation 1s linear 0s infinite;似乎并没有被合作得很好。如果您禁用按钮元素上的动画，则可以看到它将被容器遮罩。

有谁知道是否有办法保持按钮元素动画，但也有它掩盖？

谢谢！

Answer 1

只需添加

overflow: hidden; 

在下面的例子中我做了一些修改，使例子更加清晰，但你并不需要它们。只需使用剪辑路径将元素溢出添加到元素。

.foo { 
 
    outline: 1px dotted red; 
 
} 
 

 
.bar { 
 
    padding:30px; 
 
    background: silver; 
 
    -webkit-clip-path: inset(1em 1em 1em 2em); 
 
    clip-path: inset(1em 1em 1em 2em); 
 
    overflow: hidden; 
 
} 
 

 
.button { 
 
    display:inline-block; 
 
    background:red; 
 
    animation: animation 1s linear 0s infinite; 
 
} 
 

 
@keyframes animation { 
 
    0% { transform: translateY(50px); } 
 
    50% { transform: translateY(0); } 
 
    100% { transform: translateY(50px); } 
 
}

<div class="foo"> 
 
    <div class="bar"> 
 
    <div class="button"> 
 
     Test 
 
    </div> 
 
    </div> 
 
</div>