多个关键帧动画

Question

我希望箭头首先在 1.5 秒内淡入我的网站，然后在 3 秒后我希望它做一点反弹运动以指示滚动运动。我想每 3 秒重复一次弹跳动画，但只淡入一次（当我重新加载页面时）。

我现在的代码：

arrow {
  position: absolute;
  width: 100px;
  top: 85vh;
  animation: arrowInn 1.5s ease-in forwards, arrowBounce 1s 2s ease-in;
}

@keyframes arrowInn{
  from{
    opacity: 0;
  }
  to{
    opacity: 100%;
  }
}

@keyframes arrowBounce {
  0% { bottom: 0px; }
  50% { bottom: 10px; }
  100% { bottom: 0px; }
}

Answer 1

您的代码已经在运行，您只是忘记在第二个动画中添加infinite：

div {
  position: absolute;
  width: 100px;
  bottom: 10px;
  animation: arrowInn 1.5s ease-in forwards, arrowBounce 1s 2s infinite ease-in;
}

@keyframes arrowInn {
  from { opacity: 0; }
  to { opacity: 100%; }
}

@keyframes arrowBounce {
  0% { bottom: 10px; }
  50% { bottom: 0; }
  100% { bottom: 10px; }
}

<div>⬇️</div>

另外，如果你想让它从bottom 反弹，你必须在你的元素上设置bottom 属性而不是top。我反转了您的 arrowBounce 动画，使其从 10px 而不是 0 开始，但这部分取决于您。