Custom Styling for smooth CursorStyle(Carat Animation)

[UnschooledGamer]

I have Custom styling for Smooth Cursor Animation to obtain the Collapsing Carat Effect(Carat Animation), which works fine with normal cursorStyle but acts weirdly with cursorStyle as smooth

I really need the smooth cursorStyle as it adds a similar effect without the Collapsing Carat Effect(Carat Animation)

It does work in Ace Playground by mkslanc

Code

@keyframes blink-ace-animate-smooth {

    from,
    to {
        opacity: 1;
        transform: scaleY(1);
    }

    45% {
        opacity: 1;
        transform: scaleY(0.1);
    }

    60% {
        opacity: 0;
        transform: scaleY(0.2);
        color: red !important;
    }

    /* Collapse */
    80% {
        opacity: 0;
        transform: scaleY(1);
    }
}

@keyframes ace_animate_smooth {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

      .ace_cursor {
        border: none !important;
        position: absolute;
      }

      .ace_cursor::after {
        content: "";
        display: block;
        width: 2px;
        height: 100%;
        background: #fff;
        animation: blink-ace-animate-smooth 1.2s ease-in-out infinite;
        transform-origin: center center;
        transition: 0.15s all ease-out;
      }

I'm speculating it's because of the transform property in my animation.