无法将css动画属性添加到组件

Question

我正在将一个函数传递给应该注入背景动画的材质UI组件。三进制工作正常，因为我能够注入基本的CSS样式，如{ backgroundColor: "#3b69f2" }。如果能帮我找出关键帧/动画代码的错误，我们将不胜感激！

组件

<TableRow style={{ ...styleRowHiglight, ...styleActionable, ...styleRowActionHighlight }}>

功能

const styleRowActionHighlight = getter('matter', 'records', 'highlightRow') 
===recordConfig['meta']['id'] ?
{
"@keyframes bgcolorchange": {
"99.9%": { backgroundColor: "blue" },
"100%": { backgroundColor: "blue" }
},
"@-webkit-keyframes bgcolorchange": {
"99.9%": { backgroundColor: "blue" },
"100%": { backgroundColor: "blue" }
},
"@-moz-keyframes bgcolorchange": {
"99.9%": { backgroundColor: "blue" },
"100%": { backgroundColor: "blue" }
},
"@-o-keyframes bgcolorchange": {
"99.9%": { backgroundColor: "blue" },
"100%": { backgroundColor: "blue" }
},
WebkitAnimation: "bgcolorchange 5s infinite",
MozAnimation: "bgcolorchange 5s infinite",
OAnimation: "bgcolorchange 5s infinite",
animation: "bgcolorchange 5s infinite",
} 
:
{};

Answer 1

指向动画名称时。尝试在关键帧名称之前使用$sign，如下面的代码

WebkitAnimation: "$bgcolorchange 5s infinite",
MozAnimation: "$bgcolorchange 5s infinite",
OAnimation: "$bgcolorchange 5s infinite",
animation: "$bgcolorchange 5s infinite",