Is there a way to prevent a CSS Transition ending prematurely? - css

Question

I have a transition set on an styled button, which is getting triggered on :active state. So it smoothly goes to a pressed state, then smoothly goes back to normal state.
My problem is that the transition animation seems to end prematurely, meaning even if transition-duration is 2s, it will last much shorter, especially on mobile device taps.
Meaning the animation works on touchpad taps (relatively long), or holding the button on mobile devices, but I want it to activate and last the full time, on both mouse clicks and mobile taps.
I saw somewhere on the net, that putting the :active state on the parent, then translating the child from the parent will fix the issue, but no success yet.
Here a web environment with my code -> https://stackblitz.com/edit/vitejs-vite-tx57pk?file=src/Button.jsx
And here's the code block itself ⬇️
import styled, { css } from 'styled-components';
export const Button = styled.button`
--easing: cubic-bezier(0.18, 0.89, 0.32, 1.28);
--bg-color: #ddd;
--shadow-color: grey;
width: 100%;
height: 5rem;
color: black;
outline-offset: 5px;
border: none;
text-transform: uppercase;
display: grid;
place-items: center;
font-family: inherit;
font-weight: 700;
touch-action: manipulation;
transition: all 0.5s var(--easing);
background-color: var(--bg-color);
border-radius: 15px;
font-size: 20px;
line-height: 25px;
letter-spacing: 1.25px;
box-shadow: 0px 8px 0px var(--shadow-color);
&:active {
transform: translateY(8px);
box-shadow: 0px 0px 0px var(--shadow-color);
}
`;