<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .hover {
        background: url("data:image/svg+xml;charset=utf8, \
            %3Csvg xmlns='http://www.w3.org/2000/svg'%3E \
                %3Cstyle%3E \
                    @keyframes fadein { \
                        from { opacity:0; } \
                        to { opacity:1; } \
                    } \
                    #green { \
                        animation: fadein 16ms; \
                    } \
                %3C/style%3E \
                %3Crect width='100%' height='100%' fill='red'/%3E \
                %3Crect id='green' width='100%' height='100%' fill='green'/%3E \
            %3C/svg%3E");
    }
</style>
<body>
    <div class="box"></div>
    <script>
        window.addEventListener('load', (event) => {
            if (window.testRunner)
                testRunner.waitUntilDone();

            var rAFCount = 0;
            function animate(timestamp) {
                if (++rAFCount < 10)
                    window.requestAnimationFrame(animate);
                else if (window.testRunner)
                    testRunner.notifyDone();
            }

            var box = document.querySelector(".box");
            box.classList.add('hover');
            window.requestAnimationFrame(animate);
        });
    </script>
</body>