此问题已在此处有答案：

Possible to reverse a css animation on class removal?（7个回答）
25天前关闭
我使用一个简单的css动画，通过点击一个按钮，我切换类和播放动画反转。不幸的是，动画播放正确加载页面，但当我点击按钮，动画不运行它给予我的最后一个关键帧，没有任何动画和延迟。

<div>
  <button>click</button>
  <span ></span>
</div>

span{display:block;width:100px;height:100px;}

@keyframes a{
from { background:red;}
to {background:lime;}
}

.opened{
  animation:a 1s;
  animation-direction:reverse;
  animation-fill-mode:forwards;
  animation-delay:3s;
}
span{
  animation:a 1s;
  animation-fill-mode:forwards;
  animation-delay:3s;
}

$("button").click(function(){
  $("span").toggleClass("opened");
});

下面是我的代码笔示例code pen