将动画堆叠在一起是不好的做法吗？

Question

我正在尝试为使用两个图像（无需使用 gif 文件）的 Web 项目完成一种“淡入淡出”动画。这些图像是彼此的精确副本，只是它们具有不同的填充颜色。它们是非常简单的图像，因为它们唯一的颜色是一种填充颜色，每种颜色都不同。

我的目标是进行一种“被动”转换，当用户的视口位于页面的某个部分时会触发该转换。它应该看起来像图像的颜色正在发生变化，并且尺寸也会略微放大。设置animation-direction: alternate; 和animation-iteration-count: infinite; 可以让它看起来像图像正在扩展和改变颜色并返回到它的原始状态。

我已经设置好了，所以两个图像总是以不同的 Z-index 相互重叠，所以 image1 在前面，而 ​​image2 在它后面。使用 CSS @keyframes 规则，我可以让 image1 的不透明度慢慢降低，露出 image2 并给它一种非常轻微的颜色变化的感觉。我还应用了一个不同的 @keyframes 规则来处理图像的缩放。代码如下：

<div>
    <img class="crane-origami front" src="assets/crane.png">
    <img class="crane-origami back" src="assets/craneAlternate.png">
</div>

具有以下样式：

.crane-origami {
    position: absolute;
}

.crane-origami.front {
    z-index: 2;
    animation: breathe 2s infinite alternate, makeTransparent 2s infinite alternate;
}

.crane-origami.back {
    opacity: 1;
    z-index: 1;
    animation: breathe 2s infinite alternate;
}

和@keyframes：

@keyframes makeTransparent {
    from {}
    to {opacity: 0};
}
@keyframes breathe {
    from {}
    to {transform: scale(1.2);}
}

我想知道是否有更好的方法来实现这种转换，因为这种解决方案似乎有点脏。我不喜欢我必须将相同的动画应用到两个不同的图像上，这样它们才能始终彼此重叠。我想一个更大的问题是，如果其中一个动画将其中一个图像从一个位置移动到另一个位置，我将不得不将相同的动画应用于另一个图像，以便它与原始图像保持一致。也许将这些“移动”动画应用于包含div 并简单地将makeTransparent 动画应用于一个图像会更好，但这似乎仍然不是最好的解决方案。另外，恐怕加载时间不同会导致动画开始时间不对齐，效果不准确。

Answer 1

在你的情况下，我会选择 div 和伪。

这里的两个图像都使用div 和pseudo 上的不透明度进行缩放。

另一个选项是，如果您的图像没有任何透明区域，则可以将不同的彩色部分设置为透明，然后您可以为背景颜色设置动画，并且只需要单个图像.这当然也可以使用 SVG 来完成，为其填充颜色设置动画，因此图像类型的选择更多的是基于图像内容的实用性

.crane-origami {
  position: relative;
  margin: 20px 0 0 20px;
  width: 150px;
  height: 150px;
  background: url(http://placehold.it/150/f0f);
}
.crane-origami:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://placehold.it/150/f00);
}
.crane-origami {
  animation: breathe 2s infinite alternate;
}
.crane-origami:before {
  opacity: 1;
  animation: trans 2s infinite alternate;
}
@keyframes trans {
  from {}
  to {
    opacity: 0;
  }
}
@keyframes breathe {
  from {}
  to {
    transform: scale(1.2);
  }
}

<div class="crane-origami">
</div>