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

Question

举个例子，假设我有一个清洗，我想在用户执行某项操作时穿过一个容器，并在他们再次执行某项操作时反转，例如：

@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 小提琴，您单击“切换”按钮添加和删除洗涤，通过明确定义两个动画完成，在这里：

http://jsfiddle.net/errumm/c7ojz7r6/1/

Answer 1

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

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

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