更改元素上的颜色并立即更改回来

Question

我正在寻找一种好看的方式，当从列表中选择时，li闪烁或闪烁。 希望功能在点击时更改li的背景颜色，然后立即开始淡化回原始（白色）背景。
这是我到目前为止 - 它使李变红，但然后它保持红色。 （重要提示：我是一个初学者，所以我没有嫁给以下的方式使李亮和淡出，欢迎任何其他建议。）

单击li：

触发“myfunction”

function myfunction(){
this.className ="colll";
setInterval(function(){this.className ="";},1000);}

的CSS：

.colll{background-color:red; -webkit-transition: all .5s linear;
 -moz-transition: all .5s linear;
 -o-transition: all .5s linear;
 transition: all .5s linear;}

Answer 1

这是一个没有JavaScript的超级简单的，如果目标只是快速而简单的反馈。

http://codepen.io/justinmueller/pen/DLvnf

一个有延迟且没有JavaScript的人： http://codepen.io/justinmueller/pen/amDIB

Answer 2

li {
    color: #2E90FF;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}
li:active {
    background-color: red;
}

JSFiddle Live