css-animations - 关键帧和动画在 Next js 中根本不起作用

Question

我在 Next.js 中使用样式化的 jsx 来设置我的组件的样式，并且很多时候我发现自己在努力让动画正常工作。

所以我创建了下面的示例来演示问题，即动画和关键帧似乎在样式化的 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

这是我根本没有包含动画并显示静态红色框的结果！