Html 使css动画无限运行

使用此html/css片段：

。三角形四{
宽度：0；
身高：0；
左边框：150px实心透明；
右边框：150px实心透明；
边框底部：250px实心rgb（20,97,27）；
利润上限：-120px；
动画名称：示例；
动画持续时间：4s；
}
@关键帧示例{
0% {
背景色：红色；
}
25% {
背景颜色：黄色；
}
50% {
背景颜色：蓝色；
}
100% {
背景颜色：绿色；
}

---

添加以下css应该可以修复它：

 animation-duration: 4s;
 animation-iteration-count: infinite;

---

。三角形四{
宽度：0；
身高：0；
左边框：150px实心透明；
右边框：150px实心透明；
边框底部：250px实心rgb（20,97,27）；
利润上限：-120px；
动画名称：示例；
动画持续时间：4s；
动画迭代次数：无限；
}
@关键帧示例{
0% {
背景色：红色；
}
25% {
背景颜色：黄色；
}
50% {
背景颜色：蓝色；
}
100% {
背景颜色：绿色；
}

---

在提供的链接上，它表示动画属性是多个动画属性的缩写

必须指定

动画名称

和

动画持续时间

。然后可以添加

动画迭代计数

。三角形四{
宽度：0；
身高：0；
左边框：150px实心透明；
右边框：150px实心透明；
边框底部：250px实心rgb（20,97,27）；
利润上限：-120px；
动画：4s示例无限；
}
@关键帧示例{
0% {
背景色：红色；
}
25% {
背景颜色：黄色；
}
50% {
背景颜色：蓝色；
}
100% {
背景颜色：绿色；
}

---

我删除

动画名称：示例；动画持续时间：4s；

并添加此

动画：示例5s无限；

它将解决您的问题

另一个解决方案是只添加此项而不删除任何内容：

动画迭代次数：无限；

。三角形四{
宽度：0；
身高：0；
左边框：150px实心透明；
右边框：150px实心透明；
边框底部：250px实心rgb（20,97,27）；
利润上限：-120px；
动画：示例5s无限；
}
@关键帧示例{
0% {
背景色：红色；
}
25% {
背景颜色：黄色；
}
50% {
背景颜色：蓝色；
}
100% {
背景颜色：绿色；
}
}

只需添加

动画迭代计数：无限；

它将解决这个问题