Reactjs 在'；I don’我没有按预期工作

我正试图通过此代码笔在我的React中添加简单的云动画：

但是，它不起作用，我觉得问题更多的是反应本身，无论我是缺少还是需要补充什么

在我的应用程序中，我使用了Slick React滑块，因此我不确定它是否与问题有关

我还尝试创建单独的文件夹，而不只是纯HTML和CSS，动画工作正常，所以我知道问题不在于动画

*{margin:0；padding:0；}
身体{
/*隐藏动画期间出现的水平滚动条的步骤*/
溢出：隐藏；
}
.云{
填充：100px0；
背景：c9dbe9；
背景：-webkit线性梯度（顶部，#c9dbe9 0%，#fff 100%）；
背景：-线性梯度（顶部，c9dbe9 0%，fff 100%）；
背景：-moz线性梯度（顶部，#c9dbe9 0%，#fff 100%）；
}
/*是时候确定云的形状了*/
.云{
宽度：200px；高度：60px；
背景：#fff；
边界半径：200px；
-moz边界半径：200px；
-webkit边界半径：200px；
位置：相对位置；
}
.cloud:之前，.cloud:之后{
内容：''；
位置：绝对位置；
背景：#fff；
宽度：100px；高度：80px；
位置：绝对；顶部：-15px；左侧：10px；
边界半径：100px；
-moz边界半径：100px；
-webkit边界半径：100px；
-webkit变换：旋转（30度）；
变换：旋转（30度）；
-moz变换：旋转（30度）；
}
.云：之后{
宽度：120px；高度：120px；
顶部：-55px；左侧：自动；右侧：15px；
}
/*动画时间到了*/
.x1{
-webkit动画：移动云15秒线性无限；
-moz动画：moveclouds 15秒线性无限；
-o-动画：移动云15秒线性无限；
}
/*云的速度、不透明度和位置可变，以获得逼真的效果*/
.x2{
左：200px；
-webkit变换：比例（0.6）；
-moz变换：比例（0.6）；
变换：比例（0.6）；
不透明度：0.6；/*不透明度与大小成比例*/
/*速度也将与大小和不透明度成比例*/
/*速度越快，时间越短，单位为秒*/
-webkit动画：moveclouds 25s线性无限；
-moz动画：moveclouds 25s线性无限；
-o-动画：移动云25s线性无限；
}
.x3{
左侧：-250像素；顶部：-200像素；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
变换：比例（0.8）；
不透明度：0.8；/*不透明度与大小成比例*/
-webkit动画：moveclouds 20s线性无限；
-moz动画：moveclouds 20s线性无限；
-o-动画：20秒线性无限；
}
.x4{
左：470像素；顶部：-250像素；
-webkit变换：比例（0.75）；
-moz变换：比例（0.75）；
变换：比例（0.75）；
不透明度：0.75；/*不透明度与大小成比例*/
-webkit动画：moveclouds 18s线性无限；
-moz动画：moveclouds 18s线性无限；
-o动画：移动云18s线性无限；
}
.x5{
左侧：-150px；顶部：-150px；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
变换：比例（0.8）；
不透明度：0.8；/*不透明度与大小成比例*/
-webkit动画：moveclouds 20s线性无限；
-moz动画：moveclouds 20s线性无限；
-o-动画：20秒线性无限；
}
@-webkit关键帧移动云{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}
@-moz关键帧移动云{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}
@-o关键帧移动云{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}

import React，{useState}来自“React”；
导入“../App.css”
导入“./herosecute.css”；
从“/HeroData”导入数据；
导入“slick carousel/slick/slick.css”；
导入“slick carousel/slick/slick theme.css”；
从“react slick”导入滑块；
函数节（）{
const[test，setTest]=使用状态（数据）；
常量设置={
点：错，
无限：是的，
速度：1000，
幻灯片放映：1，
箭头：是的，
自动播放：错误，
幻灯片滚动：1，
类名：“幻灯片”
}
返回(
{test.map（（testData）=>{
返回(
{testData.name}

{testData.age}年

)
})}
)
}
导出默认值部分