css - 使用 CSS 在一个循环中同时运行两个不同的动画？

Question

我正在使用漂浮然后淡出的图像。 (有些人做相反的事情，淡入。)它在循环中第一次起作用，但是当它第二次通过时，淡入淡出就消失了。

.candycane {
  width: 128px;
  height: 128px;
  position: absolute;
  background: transparent url(/image/qM90U.png) 0 0 no-repeat;
}

.candycane_drift {
  top: 55px;
  z-index: 100;
  animation: drift 15s linear infinite, 3s fadeOut 12s ease-in;
}

@keyframes drift {
  from {
    transform: translateX(-175px);
  }
  to {
    transform: translateX(400px);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="candycane candycane_drift"></div>

Answer 1

您可以考虑像这样组合动画和设置关键帧百分比:

.candycane {
  width: 128px;
  height: 128px;
  position: absolute;
  background: transparent url(/image/qM90U.png) 0 0 no-repeat;
}

.candycane_drift {
  top: 55px;
  z-index: 100;
  animation: drift 15s linear infinite;
}

@keyframes drift {
  0% {
    transform: translateX(-128px);
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(400px);
  }
}

   

<div class="candycane candycane_drift"></div>

这有将两个动画绑定(bind)到一个缓动设置的缺点，但在某些情况下它可能更容易理解并且是一个很好的解决方案。