css3動畫——基本準則

標籤：style   io   os   使用   ar   for   檔案   sp   c   

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內）是一種不錯的方式去查看你的頁面元素渲染過程

css3動畫——基本準則