Html 是否可以切换或反转css动画的方向？

作为一个例子，假设我有一个清洗，当用户做某事时，我想穿过一个容器，当他们再次做某事时，我想反转，比如：

@keyframes wash{
  0%{clip-path: circle(0% at bottom left);}
  100%{clip-path: circle(150% at bottom left);}
}

@keyframes wash-reverse{
  0%{clip-path: circle(150% at bottom left);}
  1000%{clip-path: circle(0% at bottom left);}
}

.container.opening{
  animation : wash;
}

.container.closing{
  animation : wash-reverse;
}

如果我希望容器开始时不受清洗的影响，那么我希望将“清洗”应用于容器（使用开始的css类），然后将其移除（使用结束的css类），是否可以定义单个动画并使用单独的css规则来说明“向后播放动画”

我尝试了动画方向：反向，但无法使其工作

下面是一个工作（仅限Chrome）示例的JS小提琴，其中您单击“切换”按钮添加和删除清洗，通过明确定义两个动画完成：

---

尝试使用翻译而不是关键帧来更改解决方案。 在“剪辑路径”上配置翻译。更改切换按钮的逻辑以添加/删除“in”类

.adl-modal{
 -webkit-clip-path: circle(0 at bottom left);
}

.adl-modal.in{
 -webkit-clip-path: circle(150% at bottom left);
}

---

通常，

animation direction:reverse

应该可以工作，但小提琴中的动画本身对我不起作用，因此无法测试它。也许JS的设置方式完全依赖于两个关键帧规则。抱歉-仅在Chrome中测试代码-因此，如果你不使用它，它可能无法工作。这是一个很好的答案，但这个问题并不需要反向动画。因为他发布的代码只是一个例子