让背景转换在聚焦/激活点击时快速，但在释放时缓慢

Question

希望li在点击时快速/立即获得红色高亮(background-color)，并慢慢失去红色高亮。是否有一种方法来实现这一点，只有css使用:active ?或者我需要用jquery addClass, setTimeOut, removeClass

这是我目前看到的但是它会以过渡速度

<ul id="kren">
    <li>Text Text Text</li>
     <li>Text Text Text</li>
        <li>Text Text Text</li>
        <li>Text Text Text</li>
        <li>Text Text Text</li>
</ul>
<style>
#kren {list-style:none; }
li {display:block; border: thin black solid; width: 250px; }
li:active {background-color:red; transition: background-color, .5s;}
.red {background-color:red;}
</style>

Answer 1

然后添加你想要的转换速度，像这样:

li {display:block; border: thin black solid; width: 250px; transition: background-color, 2s;}

Answer 2

我把它做成这样

li:active {background-color:white; 
     -webkit-animation: play .8s steps(100) none;
       -moz-animation: play .8s steps(100) none;
        -ms-animation: play .8s steps(100) none;
         -o-animation: play .8s steps(100) none;
            animation: play .8s steps(100) none;
}
@-webkit-keyframes play {
   from { background-color:red; }
     to { background-color:white; }
}
@keyframes play {
   from { background-color:red; }
     to { background-color:white; }
}

基于:http://css-tricks.com/steps/其中的链接http://jsfiddle.net/simurai/CGmCe/。

JSFIDDLE

编辑:如果这是你想要实现的行动，我不确定，因为你在问题中说"发布后"。这里你必须按住