我可以在元素激活后强制背景图像停留一段时间吗？

Question

我正在设计一个网站主题，其中我只能更改 CSS，而不是 JavaScript 或 HTML 源。有一个 div 元素（不是链接），我想在单击时显示 APNG（如动画 GIF）背景图像。问题是div 在鼠标按钮向上后不会保持活动状态，因此动画通常没有机会播放。有没有办法阻止背景在延迟后恢复正常状态？

我认为 CSS @keyframe 动画可能会起作用，但我不确定。该图像只是一个扩展的渐变，因此可以用它替换图像（我认为图像更容易，因为渐变也不是可动画的。

Answer 1

您可以通过使用非常长的转换并调整初始状态和:active 状态的转换延迟来伪造点击并保持更改“活动”。

.box {
  width:100px;
  height: 100px;
  border: 1px solid grey;
  margin: 1rem auto;
  background-color: #f00;
  transition-property: background-color;
  transition-duration: 9999s;
}

/*.box:hover,*/
.box:active {
  background-color: #00f;
  transition-duration: 0;
  transition-delay: 0s;
  transition-timing-function: linear;

}

<div class="box"></div>