0
ベロシティのパワーを知っています。私は速度を使って私のアプリ上のすべての私のCSS3のアニメーションを変換するwan't。そして今、ステップアニメーションに問題があります。ステップアニメーションがベロシティプログレスで動作しない
これは、スニペット
$el = $(".velocity-animation");
$el.velocity({
\t paddingLeft : "0"
}, {
\t \t duration: 3000,
easing : "ease",
\t progress: function(elements, complete) {
\t var step = complete * 100 ;
\t if(step <= 50){
\t \t $el.velocity({
\t paddingLeft : "50px"
})
} else if(step <= 70){
\t $el.velocity({
\t paddingLeft : "0px"
})
} else if(step <= 100){
\t $el.velocity({
\t 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>
であり、ここであなたが
Velocity.RunSequence(mySequence);
を使用することができますフィドルhttps://jsfiddle.net/nLx3z32z/
あなたは速度はおそらく変更したい場合は、イージング関数を使用したい?:http://cubic-bezier.com/#.17,.67,.83、。 67 –
それ以上に、私は、css3のように、速度実行ステップアニメーションが欲しいです。 (30%、70%、100%) –