Keyframes and Animations do not work in Next js at all - css-animations

Question

I'm using styled jsx in Next.js to style my components and many times i have found myself struggling with getting the animations working.
so i've created the example below to demonstrate the problem which is that it seems animations and key frames don't work in styled jsx so my question is am i right? if I'm then is there a workaround for me to use animations and keyframes for my components?
here is my animation component which should show a simple animation from red to yellow
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
and here is the result which acts as i have not included an animation at all and displays a static red box !