htmlcsscss-mask

How can I animate cutting an element with CSS?

I'm trying to animate an element being cut like this example of animation

but I can't figure out how to do it. I tried doing it with transparent gradient mask and shifting the position, but I couldn't make the element visible fully, only either bottom or top half of it.

.el {
   mask-image: linear-gradient(to bottom, transparent 50%, white 50%);
   mask-position-y: 0.5em;
   mask-repeat: no-repeat;
   transition: mask-position 250ms ease;
}

The text is 1em high, and when the mask position is set to -0.5em the bottom half is cut, and when 0.5em the top half is cut. Also, I need the original box to remain visible and the same dimensions to not break the overall layout. Is there a solution for this or an entirely different method? In vanilla CSS, preferably no JS, but I do have JQuery.

Solution

  • Using mask was the correct method.

    p {
  margin: 50px;
  border: 3px solid;
  padding: 5px;
  width: 400px;
  font-size: 25px;
  -webkit-mask:
    linear-gradient(#000 50%,#0000 0) padding-box /* half opaque and half transparent. Cover only the padding area*/
     bottom/100% 200%, /* start at bottom, width = 100% and height = 200% */
    linear-gradient(#000 0 0); /* bottom layer covers all the area (including the border) */
  -webkit-mask-composite: xor;
          mask-composite: exclude; /* exclude top layer from bottom to keep only the border untouched */
  animation: hide 2s 1s forwards
}
@keyframes hide {
  to {-webkit-mask-position: top;} /* move to top */
}
    <p>Bonbon bear claw marzipan muffin oat cake candy cheesecake. Jelly icing cheesecake sweet roll sweet roll jujubes dragée. Chocolate cake tiramisu brownie halvah shortbread tootsie roll. Toffee fruitcake pi</p>