css动画 点击颜色变化再变回原色

可以使用CSS的动画和伪类来实现点击颜色变化再变回原色的效果。首先，你可以使用伪类`:active`来表示元素被点击时的状态，然后使用`animation`属性来定义颜色变化的动画。

下面是一个示例代码：

HTML:

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

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.3s;
}

.box:active {
  animation: colorChange 1s;
}

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

在上面的代码中，`.box`是一个具有背景颜色的元素。当元素被点击时，`.box:active`伪类被激活，触发名为`colorChange`的动画。动画通过关键帧`@keyframes`来定义，从初始状态开始，经过50%的时间变为蓝色，最终回到初始状态。

这样，当你点击`.box`元素时，它会有一个颜色变化的动画效果。