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

【问题标题】：Step animation not working with velocity progress步进动画不适用于速度进度
【发布时间】：2017-01-30 15:33:02
【问题描述】：

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

这是sn-p

$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"
         })
      }
    }
})

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

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

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

【问题讨论】：

如果你想改变速度，也许你想使用缓动功能？：cubic-bezier.com/#.17,.67,.83,.67
不仅如此，我还想要速度运行步骤动画，就像 css3 一样。（开 30%、70%、100%）

标签： javascript jquery css animation velocity.js

【解决方案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);

【讨论】：