CSS动画在返回时旋转 [英] CSS Animation rotate on return

问题描述

我试图创建动画，这个箭头将上下移动，也旋转或改变其方向 0％和 100％ 。但是到目前为止，箭头将在 100％上旋转秒，然后返回到上一个方向。所以基本上我想要做的是，箭头应该向上在返回和向下返回或其下来。我可以用CSS动画吗？

并在途中此
同样我想在 100％上动画旋转， code>和 0％与旋转如果可能。

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

演示
点击这里演示

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

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.

解决方案

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

For Demo CLICK HERE For Demo

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