Why isn't my css transform animation working on nextjs?

Question

I have implemented similar code a number of times before in the past with no problem. But now I'm working on NextJS and I believe there is something in the config or maybe in what I am doing but the simple little bounceup effect when hovering or clicking doesn't work at all. Next js is primarily static site generation, but that shouldn't change how the compiled css (I'm using sass) is running on the client.

<li className={styles.navbar__link}>
              <a href="#" className={styles.buttonsecondary}>Get Started</a>
            </li>
          </ul>

// css

@keyframes bounceup {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translateY(-.3rem);
    }
}

.buttonsecondary:link, .buttonsecondary:visited {
    background-color: var(--main-color-lightother);
    padding: .8rem 1.6rem;
    border-radius: 1.1rem;
    color: var(--main-color-darker) !important;
    transition: all 0.3s;
}

.buttonsecondary:hover, .buttonsecondary:active {
    transform: translateY(-.3rem);
}

I also tried using a keyframe animation and including that instead but neither worked.

I also had to include !important as it was the only was I was able to select the buttonsecondary class due to another weird situation. I only have this a few nav links on my page so far but this one is giving me trouble with simple styling.

Answer 1

// css

@keyframes bounceup {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translateY(-.3rem);
    }
}

.buttonsecondary:link, .buttonsecondary:visited {
    background-color: var(--main-color-lightother);
    padding: .8rem 1.6rem;
    border-radius: 1.1rem;
    color: var(--main-color-darker) !important;
    transition: all 0.3s;
}

.buttonsecondary:hover, .buttonsecondary:active {
    animation-name: bounceup;
  animation-duration: 0.3s;
}