CODEWITHSUNDEEP
css
Leon
Leon

Reputation: 2149

CSS animating breaking clip-path

I'm struggling with the following situation: I have an element which has a clip path to mask it's content. This is later used for an animation, revealing the content. However, there's another element inside which has an animation of it's own, which is not being 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; don't seem to be working well together. If you disable the animation on the button element, you can see it will be masked by the container.

Does anyone know if there's a way to keep the button element animating, but also have it masked?

Thanks!

Upvotes: 4

Views: 449

Answers (1)

Qwertiy
Qwertiy

Reputation: 21430

Just add

overflow: hidden;

In the example below I've made some additional changes to make example more clear, but you don't need them. Just add overflow to element with 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>

Upvotes: 4

Related Questions