Keyframe Css animation not working in Nextjs 14

Question

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?

Answer 1

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.