Question

我正在努力完成一种＆＃34;淡出＆＃34;使用两个图像的Web项目的动画（不必使用gif文件）。图像是彼此的精确副本，除了它们具有不同的填充颜色。它们是非常简单的图像，因为它们唯一的颜色是一种填充颜色，每种颜色都不同。

我的目标是制造一种被动的＆＃34;当用户的视口位于页面的某个部分时触发的转换。它应该看起来像图像的颜色正在变化，并且还会略微缩小尺寸。设置animation-direction: alternate;和animation-iteration-count: infinite;可使其看起来像图像正在扩展并更改颜色并返回其原始状态。

我设置好这两个图像总是彼此重叠，具有不同的Z索引，因此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);}
}

我想知道是否有更好的方法来实现这种转变，因为这个解决方案看起来很脏。我不喜欢这样一个事实：我必须将相同的动画应用于两个不同的图像，这样它们才能始终在彼此之上。我想一个更大的问题是，如果其中一个动画将一个图像从一个地方移动到另一个地方，我将不得不将相同的动画应用于另一个图像，以便它与原始图像保持一致。也许最好应用那些＆＃34;移动＆＃34;包含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>

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

1 个答案: