CSS-animation lets the whole webpage-section flicker when scrolling on Android

I've noticed a strange behavior on a CSS animation, when I viewed my webpage on an Android device.
When I scroll up and down a few timer while the animation is running, the whole page starts to flicker. It's reproducable (even tough a bit finicky). This YouTube-video shows the effect:
https://www.youtube.com/watch?v=tOVEDxiHQ-k&t=10s

I removed more and more code from my page until I found the culpit. It's the "@keyframes"-part of the animation. If I'd leave this part out, everything works fine, but as I want the animation: What's the real problem here?

Here is a minimal version of my source code that reproduces the problem:

<!DOCTYPE html>
<html lang="en" class="bg-gray-700">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Just a simple page</title>

        <script src="https://cdn.tailwindcss.com"></script>
        <style>
            .progressbar {
                animation:                  progressbar-countdown;
                animation-duration:         60s;
                animation-iteration-count:  1;
                animation-fill-mode:        forwards;
                animation-play-state:       running;
                animation-timing-function:  linear;
                -webkit-animation-fill-mode: forwards;
            }

            @keyframes progressbar-countdown {
                0% {
                    width: 100%;
                    background: #4F4;
                }
                100% {
                    width: 0;
                    background: #F00;
                }
            }
        </style>
    </head>
    <body class="font-sans antialiased overflow-y-scroll">
        <header class="bg-gray-900">
            <div class="max-w-7xl mx-auto py-2 sm:py-4 px-4 sm:px-6 lg:px-8 h-12">
                <h2 class="text-white">Test</h2>
            </div>
        </header>
        <div class="relative" id="countdownBar">
            <div class="h-2 mb-4 text-xs bg-indigo-100">
                <div class="progressbar shadow-none h-2 whitespace-nowrap text-white justify-center bg-primary-500" id='progressbar3'></div>
            </div>
        </div>

        <main>
            <h1 class="mt-4 text-white">This is a Test</h1>
            <div style="height: 750px;">
                Scrolling
            </div>
        </main>
    </body>
</html>