html - 多个关键帧动画

我希望箭头首先在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; }
}

最佳答案

您的代码已经可以使用，只是忘记在第二个动画上添加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开始，但是这部分取决于您。

关于html - 多个关键帧动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58500091/