I wanted to apply based css animation using keyframe. While I was able to get it to work using taiwind css. I was unable to get it to work using css. Maybe I am missing something. I would like to know how to. I have searched online and everyone keep using a animation package/library. Is it complicated to do with raw css?
So, I have a css file called animation.module.css;
There I applied the following css properties:
.slideAnimation {
animation: 2s linear infinite;
}
@keyframes slideAnimation {
0% {
opacity: 1;
transform: scale(1);
}
5% {
opacity: 0.7;
}
100% {
opacity: 0;
transform: scale(1.1);
}
}
Then I applied it this way:
export const FadeAnimationComponent =()=>{
return(
<>
<div class={>
<Image
className={`${style.slideAnimation} absolute w-full h-full`}
/>
</div>
</>)
}
It doesn’t work. I added same animation to global css file and still didn’t work. How do I use css animation and keyframe in nextjs?
Looks like you forgot to add the name of your animation: slideAnimation to animation property.
It should be:
animation: slideAnimation 2s linear infinite;
Or you could split it to such properties as animation-name, animation-duration etc.
0