动画无缝衔接会闪一下,CSS3 transition动画的FLIP动画学习,反转动画来解决动画的卡顿,闪烁。..."/>
css3帧动画无缝衔接会闪一下,CSS3 transition动画的FLIP动画学习,反转动画来解决动画的卡顿,闪烁。...
FLIP动画
web前端可谓是个无底洞,永远学不到头,知道的东西越多,就明显感觉到自己不会的越多。细细一数,发现需要学的知识能列出上百条来。只能淡定下来,一个一个的学习。心急吃不了热豆腐,不论是js,还是CSS,都实际工作中应用了三年了,仍然深感掌握的肤浅。
今天学习了一个叫FLIP动画的知识,拿出来给大家分享一下。
FLIP是几个英文字母的缩写:First ,Last,Invert,Play。并不能算是一种新技术,只是CSS transition,CSS animation动画的一种新的致力于动画流畅的实现方式。
这个FLIP的重点就是将transition动画或animation动画反转过来实现,从而达到提高过渡动画的流畅度。什么叫把动画反转过来呢?var rt=tg2.getBoundingClientRect();
tg2.style.left="400px";
var rt2=tg2.getBoundingClientRect();
var invert=rt.left-rt2.left;
console.log(invert);
tg2.style.transform="translateX("+invert+"px)";
requestAnimationFrame(function(){
tg2.className=tg2.className+" trans2";
tg2.style.transform="";
});
<更多推荐
css3帧动画无缝衔接会闪一下,CSS3 transition动画的FLIP动画学习,反转动画来解决动画的卡顿,闪烁。...
发布评论