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

我使用的图像会浮动，然后逐渐消失。 （有些情况相反，淡入。）它在循环中第一次起作用，但是在第二次进入循环时，淡入淡出了。

.candycane {
  width: 128px;
  height: 128px;
  position: absolute;
  background: transparent url(https://i.stack.imgur.com/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>

最佳答案

您可以考虑组合动画并设置关键帧百分比，如下所示：

.candycane {
  width: 128px;
  height: 128px;
  position: absolute;
  background: transparent url(https://i.stack.imgur.com/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>

这具有将两个动画都绑定到一个缓动设置的缺点，但是在某些情况下可能更易于理解和很好的解决方案。