CSS动画仅第一次工作答案

【问题标题】：css animation works only first timeCSS动画仅第一次工作
【发布时间】：2016-09-30 11:26:03
【问题描述】：

以下代码将淡入淡出元素。当淡出时，它会通过使其没有大小来“移除”元素。

当我第一次将类名 show-loading 添加到类 loading 的现有元素中时，以下代码的工作原理。此外，当我删除类 show-loading 时，同时添加类名 hide-loading 它工作正常。

但是，第二次和之后的每次都不会渲染此动画。相反，它直接跳转到动画中的最后一帧，使其可见或不可见，具体取决于是否指定了show 或hide。所以最终结果是正确的，但不是动画部分..

我怎样才能让动画在每次设置类时都参与其中，而不是显而易见的；例如。删除元素并添加一个新元素以重置已保存的任何状态...？

html

<div class="loading"></div>

css

.loading
{
  overflow: hidden;
  position: fixed;
  background: #fff;
  z-index: 9999;
  user-select: none;
}

.loading.show-loading
{
  animation: loading-fade .4s 1 linear both;
}

.loading.hide-loading
{
  animation: loading-fade .4s 1 linear both;
  animation-direction: reverse;
}

@keyframes loading-fade
{
  0%
  {
    opacity: 0;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  1%
  {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100%
  {
    opacity: 1;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

【问题讨论】：

我们能有一些小提琴来产生这个吗？

标签： css animation

【解决方案1】：

一个技巧是让相同的动画出现两次，但名称不同。

查看THISfiddle。

这是一个已知但出乎意料的行为，您可以通过“移除”当前动画，然后应用另一个动画（即使它具有相同的结构）来获得所需的效果 - 这就是我使用两个 @keyframe 动画的原因。

.loading.show-loading {
    animation: loading-fade 1s 1 linear both;
}

.loading.hide-loading {
    animation: loading-fade-backwards 1s 1 linear both;   
    animation-direction: reverse;
}

【讨论】：