I’m trying to animate an element being cut like this
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>