在:active...impossible上触发2秒动画？

Question

我有一个css动画，我想要触发:活动使用纯css。

#myShape:active {
  animation: glow 2s;
}

@keyframes glow {
  from { box-shadow: 0 0 40px 0 #f00; }
  to { box-shadow: 0 0 40px 0 #fff; }
}

这是可行的，只要鼠标被按住。但是..。

如果在动画结束前松开鼠标，它就会立即停止。持续时间不会超过鼠标被点击的时间！鼠标向上移动就会停止。

我错过了什么参数？如何在活动状态结束后强制动画序列完成？我不敢相信用CSS是不可能的..。

Answer 1

我使用CSS转换属性添加动画。

/* I did without animation (@keyframes)*/
#myShape {
  width: 200px;
  height: 200px;
  background: #9a9999;
  transition : box-shadow 2s;
  
  }

#myShape:active {
  box-shadow: 0 0 40px 0 #f00;
  transition-duration : 0s;
}

<div id="myShape"><div>

​

Answer 2

@keyframes glow {
  from,to { box-shadow: 0 0 40px 0 #f00; }
  50%{ box-shadow: 0 0 40px 0 #fff; }
}

​

#myShape {
  width: 200px;
  height: 200px;
  background: red;
  }

#myShape:active {
  animation: linear infinite 2s glow;
}

@keyframes glow {
  from,to { box-shadow: 0 0 40px 0 #f00; }
   50%{ box-shadow: 0 0 40px 0 #fff; }
}

<div id="myShape"><div>

​