Question

我有这个动画，我想在它的循环/迭代之间添加一个暂停。我已经尝试过使用animation-delay来做到这一点，但是那当然只适用于第一次迭代。现在，我将动画设置为占用3s，以使其变慢一些，而不是增加垃圾邮件，但是在中间稍作停顿会很整洁。关于如何最好地实现这一目标的任何想法？

这是代码：

.--bounce {
        -moz-animation: bounce 3s infinite;
        -webkit-animation: bounce 3s infinite;
        animation: bounce 3s infinite;
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }

        40% {
            transform: translateY(-30px);
        }

        60% {
            transform: translateY(-15px);
        }
    }

Answer 1

暂停动画的一部分-在 actual 动画下面的代码段中，bounce占50％，其余为 pause 。

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: lime;
}

.--bounce {
  -moz-animation: bounce 6s infinite;
  -webkit-animation: bounce 6s infinite;
  animation: bounce 6s infinite;
}

@keyframes bounce {
  0%,
  10%,
  25%,
  40%,
  50% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(-30px);
  }

  30% {
    transform: translateY(-15px);
  }
}

<div class="box --bounce"></div>

在动画循环之间添加暂停

1 个答案: