css3动画——基本准则

浏览数：30 / 时间：2015年06月09日

Guidelines for animation

  1. Use CSS keyframe animation or CSS transitions, if at all possible. The browser can optimize painting and compositing bigtime here.
  2. If needs to be it’s JS-based animation, use requestAnimationFrame. Avoid setTimeout, setInterval.
  3. Avoid changing inline styles on every frame (jQuery animate()-style) if you can, declarative animations in CSS can be optimized by the browser way more.
  4. Using 2D transforms instead of absolute positioning will typically provide better FPS by way of smaller paint times and smoother animation.
  5. Use Timeline Frame’s mode to investigate what is slowing down your behavior
  6. “Show Paint Rects” and “Render Composited Layer Borders” are good pro-moves to verify where your element is being rendered.

动画准则

  1. 在条件允许的情况下用keyframe animation 或者css transition 代替其他方式（比如settimeout，requestAnimationFrame，虽然后者性能已经很高了）浏览器可以实现优化绘制把重复工作整合
  2. 如果需要使用js定时器，请使用requestAnimationFram，避免使用settimeout和setinterval
  3. 避免在元素上直接改变内联style（就像jquer的animate（）干的那样）如果可以，在css文件内声明动画将会更多的得到浏览器的优化方案支持
  4. 使用2Dtransform代替position：absolute动画，这样将会得到更好的fps帧和更流畅的动画效果（确保display：block或者display：inline-block）
  5. 使用 Timeline Frame’s模式（chrome内）检查是什么原因导致性能不足
  6. 使用“Show Paint Rects”和 “Render Composited Layer Borders”功能（chrome 的 rendering内）是一种不错的方式去查看你的页面元素渲染过程

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： style 使用 文件 com Go si js ha it style 使用 文件 com Go si js ha it

相关文章

随机文章

您可能还喜欢

您可能还喜欢