css - 关键帧动画意外令牌错误的问题

Question

我正在尝试制作菜单项动画。它的工作方式与我想要的完全一样，但奇怪的是我在这段 CSS 代码之后放置的任何内容都不起作用。

从调试器我得到了这个错误

• 意外令牌“0%”
• 意外的标记 ”{”

这是我的代码：

#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%; }
}

标签： css

Answer 1

0%应该在之后{

     
    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%;}
}