CODEWITHSUNDEEP
css
karl diego
karl diego

Reputation: 3

Problem with keyframe animation unexpected token error

I'm trying to make menu item animation. It works exactly like what I want, but the weird thing is whatever I put after this CSS code it doesn't work.

And from the debugger I got this error

This is my code:

#menu-item-2398{
     
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 5px !important;
    padding-bottom: 6px !important;
    margin-right: 15px !important;
    font-size: 17px;
    text-align: center;
    line-height: 20px;
    border-radius: 999px;
    background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5);
    background-size: auto;
    background-size: 600%;
    animation: anime 16s linear infinite;
    font-family: 'Poppins', sans-serif;
    font-weight: 500 !important;
}

@-webkit-keyframes anime 0% {

  { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

  @keyframes anime 

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }
}

Upvotes: 0

Views: 458

Answers (1)

talopl
talopl

Reputation: 188

The 0% should be after the {

     
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 5px !important;
    padding-bottom: 6px !important;
    margin-right: 15px !important;
    font-size: 17px;
    text-align: center;
    line-height: 20px;
    border-radius: 999px;
    background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5);
        background-size: auto;
    background-size: 600%;
    animation: anime 16s linear infinite;
    font-family: 'Poppins', sans-serif;
    font-weight: 500 !important;
}

@-webkit-keyframes anime {

    0% {background-position: 0% 50%;}

50% {background-position: 100% 50%;}

100% {background-position: 0% 50%;}
}
@keyframes anime 
0% {background-position: 0% 50%;}

50% {background-position: 100% 50%;}

100% {background-position: 0% 50%;}
}

Upvotes: 1

Related Questions