Question

据我了解，当我在特定动画中将动画方向从正常方向更改为反向时，元素将从现在开始向右移动相反方向。但是看起来我错了，这是{{3}}当我点击反向按钮时，圆圈不会立即转向并向相反方向移动。有什么我误解的吗？

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">        </script>
    <div id="circle"></div>
    <button id='reverse'>reverse</button>
@keyframes move-right {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(200px);
  }
  40% {
    transform: translateX(400px);
  }
   60% {
    transform: translateX(600px);
  }
   80% {
    transform: translateX(800px);
  }
   100% {
    transform: translateX(1000px);
  }
}

    #circle {
        height: 50px;
        width: 50px;
        border-radius:25px;
        background-color: teal;
        -webkit-animation-duration: 20s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-name: move-right;
        -webkit-animation-iteration-count: infinite;
        animation-fill-mode: both;
        position:absolute;
        left:30%;
        top:20%; 
    }

    #circle.reverse {
      animation-direction: reverse;
    }
    $('#reverse').click(function () {
      $('#circle').toggleClass('reverse');
    });

Answer 1

您可以查看animation-direction here的文档。

它明确指出，对于reverse值： 动画在每个循环中向后播放。每次动画循环播放时，动画都会重置为结束状态并重新开始。

根据我的理解，当你向动画添加animation-direction: reverse;时，它会进入反向模式，这意味着原始动画的终点成为它的起点，反之亦然。因此，如果您的动画首先运行20％并且您将其animation-direction更改为reverse，则它的起点和终点会互换，并且相对于这些更改的终点，它会突然跳到20％点。这就是为什么你注意到你的圆圈突然跳到最右边然后继续向左移动的原因。

＆＃13;

$('#reverse').click(function () {
  $('#circle').toggleClass('reverse');
});

＆＃13;

@keyframes move-right {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(200px);
  }
  40% {
    transform: translateX(400px);
  }
   60% {
    transform: translateX(600px);
  }
   80% {
    transform: translateX(800px);
  }
   100% {
    transform: translateX(1000px);
  }
}

    #circle {
        height: 50px;
        width: 50px;
        border-radius:25px;
        background-color: teal;
        -webkit-animation-duration: 20s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-name: move-right;
        -webkit-animation-iteration-count: infinite;
        animation-fill-mode: both;
        position:absolute;
        left:30%;
        top:20%; 
    }
 #circle.reverse {
      animation-direction: reverse;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">        </script>
    <div id="circle"></div>
    <button id='reverse'>reverse</button>

＆＃13;

动画方向如何在css3动画中起作用？

1 个答案: