css3帧动画无缝衔接会闪一下,CSS3 transition动画的FLIP动画学习，反转动画来解决动画的卡顿，闪烁。...

动画无缝衔接会闪一下,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="";

});