CSS animated clip break

Question

I am struggling with the following situation: I have an element that has a path to the clip to hide its contents. This is later used for animation, revealing content. However, there is another element within which there is an animation of its own, which is not masked due to the animation.

Have a look here: https://jsfiddle.net/wne2z1m4/

So basically: -webkit-clip-path:inset(-10% 50% 98% 50%);and animation:animation 1s linear 0s infinite;it doesn't seem to work together. If you turn off the animation of a button element, you will see that it will be hidden by the container.

Does anyone know if there is a way to preserve the animation of the button element, but is it also masked?

Thank!

Answer 1

Just add

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>

Hide result