Javascript 以编程方式在固定的持续时间内应用CSS转换

我在Android应用程序的网络视图中使用了一个小书签功能区图标。功能区完全是使用CSS创建的，在默认状态下，它是灰色的

在某些情况下，我希望书签闪烁红色，然后慢慢淡出到它的自然灰色。这里的行为非常类似于当你点击一个指向SO答案的链接时——当你到达带有你点击的答案的页面时，答案背景会闪烁橙色，然后慢慢变回默认的白色。这就是我想用丝带颜色做的

那么，最好的方法是什么？（请不要JQuery——我更喜欢纯javascript。）这是我的功能区CSS：

div.ribbonDisplay {
    position: absolute;
    width: 0;
    border-style: solid;
    border-color: #c7c7c7;
    border-bottom-color: transparent;
    height: 6px;
    top: 8px;
    left: 7px;
    border-width: 5px;
    border-bottom-width: 4px;
}

---

非常感谢

可以通过以下代码更改来实现

将

id

添加到

div

元素中

创建一个单独的

red

类来设置

边框颜色

。该类将在短时间内添加，然后删除

添加下面的JS代码以在加载时添加类，然后在几秒钟后删除（超时）

window.onload=function（）{//在页面加载时添加类
document.getElementById（'ribbon'）.classList.add（'red'）；
setTimeout（removeHighlight，2000）；//调用函数在2秒后删除突出显示。
}
函数removeHighlight（）{
document.getElementById（'ribbon'）.classList.remove（'red'）；
}

div.ribbonDisplay{
位置：绝对位置；
宽度：0；
边框样式：实心；
边框颜色：#c7c7c7；
边框底色：透明；
高度：6px；
顶部：8px；
左：7px；
边框宽度：5px；
边框底宽：4px；
-webkit过渡：边框颜色1s ease；/*为过渡效果添加*/
-moz过渡：边框颜色1s轻松；
过渡：边框颜色1s轻松；
}
#ribbon.red{/*使选择器更具体，以便它覆盖初始设置*/
边框颜色：红色；
边框底色：透明；
}

---

Ribbon

我认为使用

动画

会是一种更简单的方法

@keyframes flash {
  from { border-color: #f00; }
  to { border-color: #ccc }
}

div.ribbonDisplay {
  border-color: #f00; /* in case if you want any delay time */
  animation: flash 2s ease-out forwards;
}

您甚至可以设置动画的延迟时间：

div.ribbonDisplay {
  animation: flash 2s ease-out .5s forwards;
}

---

是的，哈利。这基本上就是我要找的。如果您想添加它作为答案，我将接受它。已添加的伙伴：）