Ключевые кадры и анимации вообще не работают в Next js

Question

Я использую стиль jsx в Next. js, чтобы стилизовать мои компоненты, и много раз я сталкивался с трудностями при получении анимации.

, поэтому я создал пример ниже, чтобы продемонстрировать Проблема в том, что кажется, что анимации и ключевые кадры не работают в стиле jsx, поэтому мой вопрос, я прав? если я тогда, есть ли обходной путь для меня, чтобы использовать анимацию и ключевые кадры для моих компонентов?

вот мой компонент анимации, который должен показывать простую анимацию от красного до желтого

const Animation = () =>{
    return(
        <React.Fragment>
            <section className="wrapper">
            <p>
                <b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.
            </p>

            <div></div>

            <p>
                <b>Note:</b> When an animation is finished, it changes back to its original style.
            </p>
                <style jsx> {`
                            div {
                                width: 100px;
                                height: 100px;
                                background-color: red;
                                -webkit-animation-name: example; 
                                -webkit-animation-duration: 4s; 
                                animation-name: example;
                                animation-duration: 4s;
                            }


                            @-webkit-keyframes example {
                                from {background-color: red;}
                                to {background-color: yellow;}
                            }


                            @keyframes example {
                                from {background-color: red;}
                                to {background-color: yellow;}
                            }
                `}
                </style>
            </section>
        </React.Fragment>
    );
}

export default Animation

и вот результат, который действует так, как будто я вообще не включил анимацию и отображает красное поле состояния c!