步进动画不适用于速度进度

Question

当我知道速度的力量时。我不想使用velocity在我的应用上转换所有CSS3动画。现在我对步动画有问题。

这是代码段

＆＃13;

＆＃13;

$el = $(".velocity-animation");

$el.velocity({
	paddingLeft : "0"
}, {
		duration: 3000,
    easing : "ease",
  	progress: function(elements, complete) {
    	var step = complete * 100 ;
    	if(step <= 50 ){
      		$el.velocity({
          	paddingLeft : "50px"
          })
      } else if(step <= 70 ){
      	$el.velocity({
          	paddingLeft : "0px"
         })
      } else if(step <= 100 ){
      	$el.velocity({
          	paddingLeft : "300px"
         })
      }
    }
})

＆＃13;

.css-animation, .velocity-animation {
  background : red;
}

.css-animation {
  animation : 3s move;
}

@keyframes move {
  0% {
    padding-left:0;
  }
  50% {
    padding-left:50px;
  }
  70% {
    padding-left:0;
  }
  100% {
    padding-left:300px;
  }
}

＆＃13;

<div class="css-animation">
  Animate it
</div>

<div class="velocity-animation">
  Animate It
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.1/velocity.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

这里是小提琴https://jsfiddle.net/nLx3z32z/

Answer 1

您可以使用

Velocity.RunSequence(mySequence);

运行步骤动画（顺序动画）。

示例：

var animationSequence = [
    { e: $("#yourElm"), p: { translateX: 0 } , o: duration: 300 },
    { e: $("#yourElm"), p: { translateX: 100, opacity: 0 } , o: duration: 300 },
    { e: $("#yourElm"), p: { translateY: 100, rotateZ: 45 } , o: duration: 150 }
];
 $.Velocity.RunSequence(animationSequence);