Html 如何使动画代码在css中工作？[代码对我不起作用…]

我好像找不到我的错误，你能帮我吗

我已经把

-webkit-

前缀放好了，而且所有元素都有效

代码如下：

div{
宽度：200px；
高度：200px；
背景色：红色；
-webkit动画名称：复活节；
-webkit动画持续时间：3s；
-webkit动画计时功能：轻松；
-webkit动画延迟：1s；
-webkit动画迭代计数：无限；
-webkit动画方向：反向；
}
@-webkit关键帧{
从{top:0px；}
到{top:200px；}
}

你好

首先，

webkit

前缀仅适用于基于chromium的浏览器。其次，为了应用

top

，您需要指定一个类似的绝对值或相对值：

div{
宽度：200px；
高度：200px；
背景色：红色；
位置：绝对位置；
-webkit动画名称：复活节；
-webkit动画持续时间：3s；
-webkit动画计时功能：轻松；
-webkit动画延迟：1s；
-webkit动画迭代计数：无限；
-webkit动画方向：反向；
动画名称：复活节；
动画持续时间：3s；
动画计时功能：轻松自如；
动画延迟：1s；
动画迭代次数：无限；
动画方向：反向；
}
@-webkit关键帧{
从{top:0px；}
到{top:200px；}
}

你好

您需要添加

位置：相对到您的css


div{
宽度：200px；
高度：200px；
背景色：红色；
位置：相对位置；
-webkit动画：复活节5s无限；
-webkit动画持续时间：3s；
-webkit动画计时功能：轻松；
-webkit动画延迟：1s；
-webkit动画迭代计数：无限；
-webkit动画方向：反向；
动画：复活节5s无限；
}
@-webkit关键帧{
从{top:0px；}
到{top:200px；}
}

你好
其他信息对于@Hien Nguyen的答案，我建议您在使用动画和
@关键帧
时使用以下语法，以提高浏览器的兼容性：

/*Safari 4.0-8.0*/
@-webkit关键帧{
从{top:0px；}
到{top:200px；}
}
/*标准语法*/
@复活节关键帧{
从{top:0px；}
到{top:200px；}
}

而不是：

@-webkit关键帧{
从{top:0px；}
到{top:200px；}
}
什么不起作用？除了基于chromium的浏览器之外，它在其他浏览器上不工作吗？这是因为前缀只适用于chromium。确切地说，你想要哪种类型的动画？你想把它放在底部还是这与你的代码位置有关：相对；如果任何答案对你有帮助，你应该将其作为答案进行检查。这也将帮助其他用户