能否使用transition简化CSS关键帧动画实现的:target高亮淡出效果？

可以用transition简化代码，但需要注意状态切换的行为和原动画略有差异：原关键帧动画是仅在元素成为:target时执行一次从绿色到无背景的淡出，而transition会在元素进入和离开:target状态时分别触发过渡效果（进入时从无背景过渡到绿色，离开时从绿色过渡到无背景）。

如果可以接受这个差异，简化后的代码如下：

/* 给所有可能成为target的元素设置默认样式和过渡 */
[id] {
  background: none;
  transition: background 4s;
}

/* 当元素成为target时设置绿色背景 */
[id]:target {
  background: green;
}

如果需要和原动画行为完全一致（仅在成为target时触发一次淡出，离开时无反向过渡），还是建议保留原关键帧动画——因为transition本身是基于状态切换的双向过渡机制，无法直接实现单向的一次性淡出效果。

内容的提问来源于stack exchange，提问作者Daniele Procida