html - 多个关键帧动画

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 开始，但这部分由你决定。