关键帧动画出现问题，出现意外标记错误

Question

我正在尝试制作菜单项动画。它的工作原理和我想要的完全一样，但奇怪的是，无论我在这个CSS代码后面放什么，它都不起作用。

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

• 意外令牌"0%">
• 意外标记"；{quot

这是我的代码：

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

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