滤镜亮度过渡CSS3

Question

我正在研究图像的过渡和滤镜。 我的页面上有以下代码：

.circle {
  z-index: 99;
  transition: 1s ease;
  filter: brightness(1)
}

.circle:hover {
  filter: brightness(3)
}

<div class="animation">
  <img class="centeredLayer1 vape" src="export-psd/Layer-0.png" alt="">
  <img class="centeredLayer1 circle" src="export-psd/CIRCLE-OFF.png" alt="">
</div>

当我在div上悬停时。图像可以正确启动亮度动画，但是当过渡时间结束时，图像将打开初始状态。这种行为似乎只在亮度下发生。我尝试使用模糊和其他滤镜，似乎可以正常工作。

我做错了什么？我已经尝试过使用Webkit前缀，但是得到了相同的结果。

谢谢。