如何循环包含多个关键帧定义的CSS动画？ [英] How do I loop a css animation with multiple keyframe definitions?

问题描述

问题

我在单个元素上运行两个CSS关键帧动画：

.fade-bg {
  animation-name: fade-bg-1, fade-bg-2;
  animation-delay: 0, 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

动画定义如下：

@keyframes fade-bg-1 {

  from {
      opacity: 0;
      background-image: url(image-1.jpg);
  }

  50% {
      opacity: 1;
      background-image: url(image-1.jpg);
  }

  to {
      opacity: 0;
      background-image: url(image-1.jpg);
  }

}

@keyframes fade-bg-2 { /* Same as fade-bg-1 only with image-2.jpg  */ }

以上工作正常，但当它到达第二个动画时，它只重复该动画，而不循环回到fade-bg-1。

我尝试了许多不同的animation-direction组合，但都无济于事。

问题

如何使动画返回到fade-bg-1并自行重复？

示例

EXAMPLE

推荐答案

没有Javascript，我想您不能。但是，您可以使用单个关键帧动画实现相同的效果。

.fade-bg {
  animation-name: fade-bg;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
}


@keyframes fade-bg {
    0% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    25% {
        opacity: 1;
        background-image: url('image-1.jpg');
    }

    50% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    51% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }

    75% {
        opacity: 1;
        background-image: url('image-2.jpg');
    }

    100% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }
}

EXAMPLE

这篇关于如何循环包含多个关键帧定义的CSS动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！