Animating CSS clip-path for unique design effects

Question

Animating CSS clip-path for unique design effects

I'm facing a challenge with a specific scenario: I have an element that utilizes a clip path to hide its content. This clip path is meant for an animation later on, where the content will be revealed. However, there is another element nested inside that has its own animation, but it's not being concealed by the clip path.

You can view the issue here: https://jsfiddle.net/wne2z1m4/

In essence,

-webkit-clip-path:inset(-10% 50% 98% 50%);

and

animation:animation 1s linear 0s infinite;

don't seem to cooperate well together. If you turn off the animation on the button element, you'll notice it gets masked by the surrounding container.

Does anyone have any insights on how to maintain the animation on the button element while ensuring it remains masked?

Thank you!

css

Answer 1

Answer №1

Simply include

overflow: hidden;

In this scenario, I have implemented some tweaks to enhance clarity in the example provided below, although they are not mandatory. Just ensure that overflow is added to the 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>

Answer 2

Simply include

overflow: hidden;

In this scenario, I have implemented some tweaks to enhance clarity in the example provided below, although they are not mandatory. Just ensure that overflow is added to the 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>

Animating CSS clip-path for unique design effects

Answer №1

Similar questions

The absence of an eye icon in the password field when using bootstrap 5

how to choose the :after pseudo-element with jQuery

What is the significance of keyframes in CSS animations at different percentages

Navigate to the homepage section using a smooth jQuery animation

Animating CSS based on the viewport's position

Can @keyframes be iterated through CSS (particularly Stylus)?

Tips for positioning and resizing an HTML slide

Strategies for smoothly navigating the page to a specific div every time

The left border consistently occupies any leftover space within the container

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

Recaptcha is functioning properly on smartphones, however, it is experiencing difficulty on computers

What is the method for specifying the HTML file extension within Visual Studio?

Creating side by side input panels with Bootstrap version 3.1 on Internet Explorer 8

Resolving Problems with Ion-Split-pane in the Latest Versions of Angular and Ionic

Why doesn't the link to CSS work when placed outside the HTML folder with Gulp-webserver?

Optimal Placement of CSS and index.html Files in ReactJS with Redux

What is the best way to connect CSS properties to an image using JavaScript?

What is the best way to vertically center a caption when an image is being hovered over

Tips for showcasing a block of text within a table cell

What is the best way to eliminate leading zeros in PHP when echoing SQL statements?