Текст исчезает, если вы наводите курсор в середине анимации ⇐ CSS

[Anonymous]

У меня есть простой компонент кнопки с некоторой текстовой анимацией.
при наведении курсора анимация работает нормально, но если я наведу и сниму курсор быстро или если я сниму курсор в середине анимации, текст исчезнет,


вот содержимое моего компонента
index.tsx
import { motion } from "framer-motion";
import styles from "./styles.module.scss";

interface ButtonProps {
isActive: boolean;
toggleMenu: () => void;
}

const Button: React.FC = ({ isActive, toggleMenu }) => {
return (








);
};

interface PerspectiveTextProps {
label: string;
}

const PerspectiveText: React.FC = ({ label }) => {
return (

{label}
{label}

);
};

export default Button;

а вот мои стили
анимация основана на .perspectiveText
styles.module.scss
.button {
position: absolute;
top: 25px;
right: 25px;
width: 100px;
height: 40px;
cursor: pointer;
border-radius: 25px;
overflow: hidden;

.slider {
position: relative;
width: 100%;
height: 100%;

.el {
width: 100%;
height: 100%;
background-color: #c9fd74;
p {
margin: 0px;
}
&:nth-of-type(2) {
background-color: black;
p {
color: #c9fd74;
}
}
&:hover {
.perspectiveText {
transform: rotateX(90deg);
p {
&:nth-of-type(1) {
transform: translateY(-100%);
opacity: 0;
}
&:nth-of-type(2) {
opacity: 1;
}
}
}
}
}
}
}

.perspectiveText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
transform-style: preserve-3d;
transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
p {
transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
pointer-events: none;
margin: 0;
&:nth-of-type(2) {
position: absolute;
transform-origin: bottom center;
transform: rotateX(-90deg) translateY(50%);
opacity: 0;
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/781 ... -animation