WPF animation stutters from time to time, while html in webview2 does not, I'm so confused

[Paper-Folding]

Hello, everyone, hello dear developers here.
I'm developing a marquee animation with WPF:
I come up with this simple xaml code that performs the marquee animation on a textblock back and forth:

        <Canvas
            ClipToBounds="True"
            Background="AliceBlue"
            Width="750"
            Height="150">
            <TextBlock
                FontSize="70"
                TextAlignment="Center"
                VerticalAlignment="Center"
                Text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog." RenderTransformOrigin="0.5,0.5">
                <TextBlock.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <TranslateTransform X="0" />
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="TextBlock.Loaded">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
                                            AutoReverse="True"
                                            RepeatBehavior="Forever"
                                            From="0"
                                            To="-3000"
                                            Duration="0:0:12" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Resources>
            </TextBlock>
        </Canvas>

However, I found the animation sometimes stutter, not looking smooth, it visually feels like some frames are being skipped from time to time.

Then I try to implement the same animation in html in webview2:

The html code in jsx(I'm using react.js):

import "./App.scss";

export default function App() {
    return (
        <div
            style={{
                width: "750px",
                height: "150px",
            }}
        >
            <div className="animation-stage">
                <p>
                    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
                    brown fox jumps over the lazy dog.
                </p>
            </div>
        </div>
    );
}

App.scss:

.animation-stage {
    overflow: hidden;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;

    > p {
        font-size: 4.5em;
        white-space: nowrap;
        position: relative;
        will-change: transform;
        animation-name: marquee;
        animation-duration: 24s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-3000px);
    }

    100% {
        transform: translateX(0px);
    }
}

The webview2 code is very simple, I just reference the react.js dev server as startup url:

<wv2:WebView2 Grid.Row="1" Source="http://localhost:5173" />

And then I got very very smooth marquee animation in webview2.

I do hope WPF animation could be as smooth as the one in webview2, I have tried Bitmap Cache:

   <TextBlock.CacheMode>
        <BitmapCache EnableClearType="True" RenderAtScale="1" />
    </TextBlock.CacheMode>

I also tried disabling UseLayoutRounding:

<TextBlock UseLayoutRounding="False" ... />

But all these methods did not work. Just I'd like to ask if anyone knows how to get rid of the stutter in WPF animation?

Also I'm confused, of course I can migrate my code to use webview2, but is it considered the best practice?

[Paper-Folding]

Similar question on stackoverflow: https://stackoverflow.com/q/3002271/14963554