CSS Width 值虽然变化，但没有变化

Question

我正在尝试为我正在制作的游戏添加场景之间的过渡效果。 但无论我做什么，我都无法让它发挥作用。 我得到一个空白的黑屏或根本没有出现的结果。

CSS (TailwindCSS)

@keyframes SkipScene {
        0% {
            width: 0% !important;
            left: 0% !important;
        }
        50% {
            width: 100% !important;
            left: 0% !important;
        }
        100% {
            width: 0% !important;
            left: 100% !important;
        }
    }

.skipScene {
    @apply absolute w-[0%] top-0 min-h-screen bg-black transition-all duration-[250ms] z-[99999];
}

.skipScene.animate {
    animation: SkipScene 1s ease-in-out;
}

Javascript（香草）

class Dialogue {

    // ...

    SkipScene (next) {
        if (this == undefined) {
            return next(next);
        }

        const Element = document.createElement('div');
        Element.classList.add('skipScene');
        document.body.appendChild(Element);

        setTimeout(() => {
            Element.classList.add('animate');
            setTimeout(() => {
                Element.classList.add('opacity-0');
                setTimeout(() => {
                    Element.remove();
                }, 250);
            }, 750);
        }, 0)
    }

    // ...

}

主要代码

DialogueHandler.SkipScene(DialogueHandler.SkipScene.bind(DialogueHandler));