是否可以切換或反轉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規則，說「向後播放動畫」？

我試過動畫方向：反向，但我無法讓它工作。在您的「切換」按鈕來添加和刪除洗，通過定義明確雙方的動畫完成

工作的

一個JS小提琴器（Chrome只）例如，就在這裏：

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