CSS animation not work correctly on Firefox with Chrome

I tried to create a simple animation using css, everything work correctly on Chrome, but not the same on Firefox. I think it come from a bug in Firefox,

Here is two video example:

1. On Chrome: enter image description here

Here when I hover on item, it should stop animation,

2 On Firefox: enter image description here

On Firefox, when I hover, it not correct,

Here is my code:

const x = (margin: number) => keyframes`
  100% {
    transform: translateX(calc(100vw - ${margin}px));
        transform-origin: 0 100%;
  }
`;

const y = keyframes`

  100% {
    transform: translateY(calc(100vh - 320px));
        transform-origin: calc(100vw - 200px) calc(100vh - 500px); 
  }
`;

const Wrapper = styled.div<any>`
  position: absolute;
  cursor: pointer;
  animation: ${({ margin }) => x(margin)} ${({ delay }) => delay}s linear
    infinite alternate;
  transition-property: all;
  transition-duration: 30s;

  &:hover {
    animation-play-state: paused;
    --webkit-animation-play-state: paused;
  }
`;

const Inner = styled.div<any>`
  animation: ${y} ${({ delay }) => delay}s linear infinite alternate;
  &:hover {
    animation-play-state: paused;
    --webkit-animation-play-state: paused;
  }
  display: flex;
  align-items: center;
`;

My code when I call component:

const Animation = ({
  getRandomInt,
  isCollapsed,
  keyword,
  onVisibleModal,
  getArticlesByKeyword,
  getRandomColor,
  setSelected,
}: AnimationProps) => {
  const [position, setPosition] = useState({
    top: getRandomInt(700),
    left: getRandomInt(800),
  });

  const randomSizeCircle = (weight: string) => {
    const size = (parseInt(weight) || DEFAULT_SIZE_CIRCLE) * ZOOM_SIZE_CIRCLE;
    if (size > MAX_SIZE_CIRCLE) return MAX_SIZE_CIRCLE;
    if (size < MIN_SIZE_CIRCLE) return MIN_SIZE_CIRCLE;
    return size;
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      setPosition({ top: 0, left: 0 });
    }, 10000);

    return () => {
      clearTimeout(timer);
    };
  }, []);
  return (
    <Wrapper
      style={position}
      delay={getRandomInt(90)}
      margin={isCollapsed ? 250 : 350}
      key={keyword.id}
      className={"transition-all"}
    >
      <Inner
        onClick={() => {
          onVisibleModal();
          getArticlesByKeyword(keyword.id);
          setSelected(keyword.name);
        }}
        onTouchEnd={() => {
          onVisibleModal();
          getArticlesByKeyword(keyword.id);
          setSelected(keyword.name);
        }}
        delay={getRandomInt(30)}
      >
        <div>
          <Circle
            size={randomSizeCircle(keyword.weight)}
            color={getRandomColor()}
          />
        </div>
        <div>
          <Title size={randomSizeCircle(keyword.weight) / 3}>
            {capitalizeFirstLetter(keyword.name)}
          </Title>
        </div>
      </Inner>
    </Wrapper>
  );
};