TER*_*Mtm 9 css html5 css3 transitions
在CSS3中,动画是在各种供应商前缀下引入的,具有过渡属性.现在,至少在纯CSS中,有两种方法可以使元素更改位置.
left: right: top:和bottom:-vendor-transform:translate(X,Y,Z)现在,严格地说transform:translate(),除了一个人的使用能力之外,translateZ()它们之间的唯一区别是后者不是报告值; 除了解析属性本身之外,转换不是计算样式.但是,如果没有必要,后者实际上是position:fixed配置中动画和定位元素的更好选择吗?
我特别感兴趣的是制作一个需要在移动设备和浏览器上运行的非常繁重的webapp,因此向后兼容性并不是一个问题.如今的移动浏览器往往至少是"现代的".
最终,我的问题是,根据CSS3规范的制造商,到底是什么transform:translate()?它是建立在LRTB变换上使用的地方,并且当采用硬件加速(-webkit-transform: translateZ(0);)时,为了渲染速度,动画平滑度和视觉稳定性,是否可以以明显优越的方式使用它?对于那些不知道的人,有时webkit元素会在硬件加速环境中闪烁.
在任何情况下,我只是为我的网络应用寻找最好和最新的布局解决方案,它们可以最有效地利用CPU和GPU,因此它们可以在非常优化的FPS上运行(就转换而言,案例,滚动是关注的)这是最理想的平滑类型的一个很好的例子是http://www.webkit.org/blog-files/leaves/(是的,我确实阅读了它的来源.)
有什么输入?
我知道这是一篇较老的帖子,但是当我想知道同样的问题时,我发现这篇文章非常有用:
http://css-tricks.com/tale-of-animation-performance/