Css 组合多个动画

我试图通过单击按钮将动画的几个部分组合在一起。下面是一个例子：

.element {
  background-color: black;
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 80%;
}
.one { 
  animation: one 1.5s ease 1 forwards;
}
.two {
  animation: two 1s forwards;
}

@keyframes one {
  from {
    transform: scale(0.25);
    opacity: 0；
  }
  25% {
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 0.5;
  }
}

@keyframes two {
  from {
    opacity: 0.5；
  }
  to {
    opacity: 0;
  }
}

我试图将这两种动画结合起来：一种和另一种。我的方法是在单击按钮时使用JS:

classList.add（'.two'）

。但问题是：在我添加类的那一刻，元素的默认不透明度变为1

为了解决这个问题，我添加了一个包含样式的新类，这些样式实际上是第一个动画的最终样式的克隆。在第二部分完成后，我不得不删除课程列表，为第一部动画的播放做准备

所以我的问题是，有没有更好的方法

这是一个

我刚刚意识到了一个问题：如果我在第一个动画完成之前开始第二个动画，就会出现不连续性（圆会突然变大）

---

演示可以从上面的链接找到，谢谢

我可以组合这两个动画吗？

我假设“组合”是指使用相同的关键帧规则生成正向（单击添加动画）和反向（单击移除动画）动画。这是可能实现的，但正反转动画应该完全相同（但方向相反）。当它相同时，我们可以使用

动画方向：reverse

来实现相同关键帧的反转效果

在这里，正向动画具有

变换

更改，而反向动画没有，因此添加

动画方向：反向

不会产生与原始片段相同的效果。此外，对其进行编码并不像仅仅添加一个属性那么简单，还需要做很多工作

---

其他两个问题的原因是什么？

这两个问题的原因（即，单击“删除”按钮时元素立即获得

不透明度：1

，以及单击“删除”按钮时元素在正向动画仍在进行时获得完整大小）是相同的。移除元素上的动画（通过移除类）时，它会立即捕捉到动画外部指定的大小

对于第一种情况，大小是在

.element

下提到的大小（因为

.one

被删除），其

不透明度

默认为1，因为其中没有

不透明度

设置。对于第二种情况，当删除

.one

并添加

.two

时，动画将被删除，因此元素的大小与

.element

中指定的相同，

不透明度与
.two
中指定的相同（因为这在CSS文件中稍后）


那么备选方案还有什么？

如果同时需要正向和反向效果，并且动画没有任何中间状态（即，只有开始状态和结束状态），则最好使用过渡而不是动画。原因是，在移除类时，变换会自动产生反转效果（与动画不同，在动画中，反转动画需要作为单独的关键帧编写并添加到元素）

下面是一个示例代码段，演示了如何仅使用一个类而无需编写关键帧即可实现类似效果


var theBut=document.getElementById（'butt'）；
var theBut2=document.getElementById（'butt2'）；
theBut.addEventListener（'click'，函数a（）{
document.querySelector（'.element'）.classList.add（'one'）；
});
but2.addEventListener（'click'，函数b（）{
document.querySelector（'.element'）.classList.remove（'one'）；
});
.element{
背景色：#d91e57；
显示：块；
宽度：160px；
高度：160px；
边界半径：90%；
变换：比例（0.25）；
不透明度：0；
过渡：不透明度2s，变换1s 2s；
}
.一{
变换：比例（1）；
不透明度：0.5；
过渡：所有2；
}

添加动画
删除动画
我可以合并这两个动画吗？

我假设“组合”是指使用相同的关键帧规则生成正向（单击添加动画）和反向（单击移除动画）动画。这是可能实现的，但正反转动画应该完全相同（但方向相反）。当它相同时，我们可以使用
动画方向：reverse
来实现相同关键帧的反转效果

在这里，正向动画具有
变换
更改，而反向动画没有，因此添加
动画方向：反向
不会产生与原始片段相同的效果。此外，对其进行编码并不像仅仅添加一个属性那么简单，还需要做很多工作


其他两个问题的原因是什么？

这两个问题的原因（即，单击“删除”按钮时元素立即获得
不透明度：1
，以及单击“删除”按钮时元素在正向动画仍在进行时获得完整大小）是相同的。移除元素上的动画（通过移除类）时，它会立即捕捉到动画外部指定的大小

对于第一种情况，大小是在
.element
下提到的大小（因为
.one
被删除），其
不透明度
默认为1，因为其中没有
不透明度
设置。对于第二种情况，当删除
.one
并添加
.two
时，动画将被删除，因此元素的大小与
.element
中指定的相同，
不透明度与
.two
中指定的相同（因为这在CSS文件中稍后）


那么备选方案还有什么？

当同时需要正向和反向效果时