Javascript CSS三角形在两种颜色之间转换

我用CSS制作了一个三角形，我希望它在两种颜色之间缓慢过渡，而不使用悬停状态

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid $mgrey;
 }

我试着把一些东西，比如

transition:color0.3s但这似乎不起作用。我需要使用JavaScript来实现我所追求的效果，还是可以用纯CSS来实现

谢谢。
使用CSS
转换
，您应该为
边框颜色
属性设置转换，而不是
颜色

。向下箭头{
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：20px实心透明；
边框顶部：20px纯红；
过渡：边框颜色0.2s线性；/*或边框顶部颜色*/
}


更新
我的意思是不使用悬停状态。所以它只是慢慢的
无需与页面交互即可在页面上进行转换

根据您的更新，您可以使用（如@arty所建议的）设置
边框颜色的动画
：

。向下箭头{
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：20px实心透明；
边框顶部：20px纯红；
动画：边框颜色；
}
@-关键帧边框颜色
{
0%{边框顶部颜色：红色；}
100%{边框顶部颜色：金色；}
}


或者使用JavaScript将
.hover
类添加到元素中，并使用
转换方法，如下所示：

。向下箭头{
过渡：边框颜色2s；/*或边框顶色*/
}
.arrow-down.hover{
边框顶部颜色：金色；
}

使用jQuery方法：

$（'.arrow down'）.addClass（'hover'）；

哦，对不起，我认为我的指定不正确。我的意思是不使用悬停状态。因此，它只是在页面上缓慢地切换，而不必与页面交互。请使用css3关键帧，例如：@user2933987我已经更新了答案以满足您的需要。@HashemQolami这太完美了。当我将“无限”应用于动画时，它将动画设置回第一个状态，而不是跳回第一个状态，我该如何获得它？@faooful您可以使用
交替
值作为
动画方向
：