小编w3b*_*k3r的帖子

我一直在做需要平滑过渡和动画的项目.我们最近几乎100%的时间都从使用Javascript迁移到CSS动画.

我发现使用translate3d可以在移动设备和桌面设备上提供非常流畅的动画效果.

我目前的动画风格是这样的:

CSS:

.animation-up{
     transform: translate3d(0, -100%, 0);
 }

.animation-down{
     transform: translate3d(0, 100%, 0);
 }

.animation-left{
     tranform: translate3d(-100%, 0, 0);
 }

.animation-right{
     tranform: translate3d(-100%, 0, 0);
 }

最近,我开始研究不同的框架,这些框架似乎得到了很多关注.两个特定的GreenSock(http://greensock.com/tweenmax)和Famo.us(http://famo.us).两者都显示出令人敬畏的帧率和惊人的性能.

我注意到他们正在使用马蒂克斯变换.

Greensock示例(使用矩阵):

<div class="box green" style="transform: matrix(1, 0, 0, 1, 0, 100);"></div>

Famo.us示例(使用3D矩阵):

<div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149, 385, 0, 1);"></div>

我的问题是...... translate3d和matrix有什么区别？使用matrix而不是translate3D是否有巨大的改进？是否有另一种方法可以产生更好的结果？

我对translate3D很满意,但是想学习任何方法都能提供最流畅的动画,并寻找可能的指导.