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

Question

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

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

我已将其设置为使两个图像始终以不同的 Z 索引彼此重叠，因此图像 1 在前面，而图像 2 在它后面。使用 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 和伪造的不透明度缩放。

另一种选择是，如果您的图像没有任何透明区域，可以将不同的彩色部分设置为透明，然后您可以为背景颜色设置动画，只需要一个图像.这当然也可以使用 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>