CSS动画破坏了剪切路径

Question

CSS动画破坏了剪切路径

4

我遇到了以下情况：我有一个元素，它具有剪切路径来遮蔽其内容。这稍后用于动画，揭示内容。然而，里面还有另一个元素，它有自己的动画，由于动画而没有被遮蔽。

请看这里：https://jsfiddle.net/wne2z1m4/ 基本上：-webkit-clip-path:inset(-10% 50% 98% 50%);和animation:animation 1s linear 0s infinite;似乎无法很好地配合使用。如果在按钮元素上禁用动画，则可以看到它将被容器遮蔽。

是否有人知道是否有办法保持按钮元素的动画，同时也使其被遮蔽？

谢谢！

- Leon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Qwertiy · Accepted Answer

只需添加

overflow: hidden;

在下面的示例中，我进行了一些额外的更改，以使示例更加清晰，但您不需要它们。只需将overflow添加到具有clip-path的元素即可。

.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>