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;
}

如果我希望容器开始不受洗涤影响，那么我想要应用＆＃34;洗涤＆＃34;到容器（使用开放的css类），然后删除它（使用结束css类）是否可以定义单个动画并有一个单独的CSS规则，说＆＃34;向后播放动画＆＃34;？< / p>

我已经尝试了动画方向：反向，但我无法让它发挥作用。

一个工作（仅限Chrome）示例的JS小提琴，您可以点击＆＃39;切换＆＃39;按钮添加和删除清洗，通过明确定义两个动画完成，在这里：

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

Answer 1

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

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

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

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

1 个答案: