在没有动画onload的情况下，在类删除时反转css动画

Question

我基本上想要为-webkit-clip-path添加一个额外步骤的转换。 我知道这样做的唯一方法就是使用css动画。

点击菜单触发器将课程.menuShown添加到body。菜单通过动画对此作出反应。删除.menuShown后，动画应该反转。 我知道这样做的唯一方法是在主元素上使用动画。 但这样动画就会在加载时触发。

这是一支说明问题的笔。 另外，在此示例中，我无法让animation-fill-mode正常工作。

我几乎总是在添加/删除类之后使用动画/过渡，并且一直想知道如何使用实际的css动画来完成这项操作而不会出现初始动画的问题。

http://codepen.io/katerlouis/pen/kXZadL

.menu {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    animation: menuClipPath 2000ms linear;
    animation-direction: reverse;
}

body.menuShown .menu {
    animation: menuClipPath 2000ms linear;
    // animation-fill-mode: forwards;
}

@keyframes menuClipPath {
        0% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); }
        50% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 85%); }
        100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}