CSS动画旋转的回报 [英] CSS Animation rotate on return

问题描述

我想创建与这个箭头的动画，将上下移动，并旋转或 0％和 100％，改变其方向。但我走到这一步，是箭头将为秒旋转的 100％，然后重新回到previous方向。所以基本上我所要做的是，箭头应点起来在其一路上涨和点向下在申报或者它的一路下来。我能做到这一点只用CSS动画？

I am trying to create animation with this arrow that will move up and down and also rotate or change its direction on 0% and 100%. But what I got so far is that arrow will rotate for sec on 100% and then return back to previous direction. So basically what I am trying to do is, arrow should point up on its way up and point down on return or on its way down. Can I do this with just CSS animations?

演示

DEMO

在一路上涨箭头应该有这个方向 并在一路下跌这其中的
此外，我想动画的 100％的旋转和 0％与旋转如果可能的。

On way up arrow should have this direction and on way down this one Also I want to animate that rotation on 100% and 0% with rotate if its possible.

推荐答案

只是更改动画低于code

Just Change the animation with below code

@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;
  }
}

有关演示
点击这里演示

这篇关于CSS动画旋转的回报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！