html - CSS 动画在返回时旋转

Question

我正在尝试使用此箭头创建动画，它会上下移动并在 0% 和 100% 上旋转或更改其方向。但到目前为止，我得到的是箭头将在 100% 上旋转 sec，然后返回到之前的方向。所以基本上我想做的是，箭头应该指向在它的向上和指向下返回或它的往下走。我可以仅使用 CSS 动画来做到这一点吗？

DEMO

在向上 箭头应该有这个方向在下这一个此外，如果可能的话，我想在 100% 和 0% 上使用 rotate 设置旋转动画。

Answer 1

只需用下面的代码改变动画

@keyframes bounceAndRotate {
  0% {
    transform:rotate(0deg);top:-20px;
  }
  25% {
     transform:rotate(00deg);top:-10px;
  }
  50% {
     transform:rotate(0deg);top:0px;
  }
  75% {
     transform:rotate(180deg);top:10px;
  }
  100% {
    transform: rotate(180deg);top:20px;
  }
}

用于演示 CLICK HERE For Demo