关键词：
【中文标题】性能：CSS3 动画 vs. HTML5 Canvas【英文标题】：Performance: CSS3 animations vs. HTML5 Canvas 【发布时间】：2012-06-26 07:17:26 【问题描述】：我正在开发一个当前使用 CSS3 过渡构建的 web 应用（将仅在 Chrome 19+ 中运行）。更具体地说，我使用Jquery Transit 来使用Jquery 本身触发CSS3 动画。这里的原因是一些动画被画了几秒钟，jquery animate 不够流畅，但 Transit 是一个很好的解决方案。 Jquery Transit 运行良好，但我很好奇 HTML5 Canvas 是否会使事情变得更流畅？如果是这样，考虑到我目前正在为 DIV 使用 AJAX 和基于百分比的位置这一事实，是否值得追求？如果这里有人知道 CSS3 动画与 HTML5 Canvas 在 Chrome 中的性能相比如何并愿意提供他们的意见，我将不胜感激！
【问题讨论】：
这应该可以帮助您做出决定。 ***.com/questions/4842872/… 另外，HTML5 画布性能在 IE9+ 上会更好。将硬件加速集成到新版本的 IE 中令人印象深刻。 @DarkXphenomenon：非常有趣的测试！由于我的应用程序只会在 Chrome 19+ 上显示，因此 CSS3 动画的性能似乎与 Canvas 一样好（如果不是更好的话），至少从版本 8 开始？ 是的。您可能应该使用 CSS3。 除了性能之外，您还可以考虑画布是否适合这种情况。使用 CSS 和 HTML 可以轻松完成的工作，使用 canvas 可能变得过于复杂。当然，如果你想要火热的爆炸效果或其他更适合 canvas 的东西，混合型会是最好的（即，只使用 canvas 来实现效果，并将其他所有内容保留在 CSS 中） 【参考方案1】：CSS3 将减少您的麻烦，并且您可以在将来轻松更改它，并且它可以在不支持画布的系统上正常工作。
如果您使用的是文本，那么您绝对应该坚持使用 CSS，如果可以的话。 Canvas 会破坏您应用的可访问性，并禁止用户使用克拉或突出显示文本或使用文本转语音。
如果您只是制作一个有趣的滑动按钮或其他东西，那么您也应该只使用 CSS，因为它可能更容易实现和维护。重做 CSS 比费力（可能很复杂）JavaScript 更容易。
我不能诚实地告诉你画布渲染是否会更平滑。画布的一个优点是您可以将事物设置为看似更大的尺寸（同时保持画布尺寸相同），而无需重新布局 DOM。在大多数现代系统上，这确实不是问题。
此外，如果它已经用 CSS3 完成，你真的有性能问题吗？如果还没有人抱怨过性能，为什么还要为画布重写它呢？如果到目前为止您没有遇到任何真正的性能问题，为什么要重新发明您的应用程序？
【讨论】：
是的，我明白你的意思。本质上，我们试图在最便宜的硬件上获得最高性能来运行应用程序，但是对于这种类型的实现来说，Canvas 似乎比它的价值更麻烦——尤其是因为你提到破坏了可访问性。我们使用了大量的文本，所以这确实会破坏交易。感谢您的意见！ 看起来是一个很好的答案，但最后你承认你不知道画布是否会更好所以你实际上没有回答这个问题:) 2012 年的性能格局变化太快，无法给出“肯定”的答案。如果您愿意，必须进行基准测试。【参考方案2】：我认为画布可能会遇到的问题是它是基于位图的。因此，在页面初始呈现后放大和缩小将是一个问题。此外，换行可能会很痛苦。编写您网站内容的人可能会发现插入换行符具有挑战性，因为没有使用 canvas、svg 或 vml 的换行符之类的东西。实际上，您需要预先计算换行符。 "\n" 使用 raphael.js 有效，但效果不佳。此外，如果您在 svg 图形中，则不能使用选择器来定位各个部分。你也许可以使用画布，也许……画布可能有很多相同的陷阱。
在图像前面，如果缩放图像，您将看到模糊的图像，并且处理画布图像大小调整的库较少。这在未来可能会改变，但仍将是一个考验。对于旧版浏览器，我会坚持使用带有 jquery 后备的 divs/css3。
从纯粹的性能角度来看，请查看对您问题的第一条评论。它有一些不错的基准。
【讨论】：
我明白了——是的，换行符在我们的实现中尤其重要，因为我们使用了大量的文本。据我了解，使用大量样式文本（或动态 HTML 内容）意味着坚持使用 CSS3 制作动画，而画布似乎更适用于绘制形状和游戏等？高性能css3动画
高性能CSS3动画高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点：流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网... 查看详情
css3 动画性能不佳（仅限 Chrome）
】css3动画性能不佳（仅限Chrome）【英文标题】：css3pooranimationperformance(Chromeonly)【发布时间】：2012-04-0919:01:38【问题描述】：我正在开发一个使用css3动画的网站，它在Safari和Firefox中运行良好，但由于某种原因在Chrome中的性能很... 查看详情
高性能css3动画
...github上浏览。请尊重版权，转载请注明来源，多谢～～高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点：流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰... 查看详情
css3动画的性能优化
目前对提升移动端CSS3动画体验的主要方法有几点：尽可能多的利用硬件能力，如使用3D变形来开启GPU加速-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0); 一个元素通过tra 查看详情
html5/css3图片左右切换弹性动画
在线演示本地下载 查看详情
html5/css3鼠标悬停动画菜单按钮
在线演示本地下载 查看详情
web移动端css3动画性能优化
很多时候，我们在开发移动端的时候要使自己的网页兼容不同的机型，很多时候会采用CSS3动画，但是很多时候在安卓机下，动画明显会出现卡顿，很难看，那么这里我介绍几个CSS属性进行硬件加速那么就会得到明显的效果：opaci... 查看详情
css3动画卡顿性能优化解决方案--摘抄
...磕磕绊绊中完成的差不多了，但是遇到了CSS3动画渲染的性能问题，所以我也是被逼的，再回过头来从浏览器渲染网页的流程出发，去找动画卡顿的症结。浏览器渲染网页的流程如下：使用HTML创建文档对象模型（DOM）使 查看详情
动画选项 HTML5 Canvas/CSS3/jQuery
】动画选项HTML5Canvas/CSS3/jQuery【英文标题】：AnimationoptionsHTML5Canvas/CSS3/jQuery【发布时间】：2011-07-2409:28:08【问题描述】：我有兴趣在其中一种或HTML5/JQuery的组合中制作更多类似Flash的动画。其中一个想法是飞鸟、角色动画和类似... 查看详情
前端性能优化（css动画篇）
...最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章，学到了很多，在这里记录一下，其中的知识都是来源于这俩篇文章，我只是截取了其中比较关注的内容出来，原文地址HighPerformanceAnimations及AcceleratedRenderi... 查看详情
html5/css3鼠标滑过图片滤镜动画效果
在线演示本地下载 查看详情
前端25款不得不说的html5+css3动画效果
这25款动画效果分别使用了html5 svg、css3 transform、css3 transition、css3 animation等制作而成。1、9种梦幻般的html5+css3 tooltip鼠标提示插件效果这个tooltip鼠标提示插件将带您离开黄底黑字的htmltooltip原始时代。该插件共9种效果... 查看详情
html5+css3画太极并添加动画效果
可兼容移动端视图效果图如下：太极图是可以旋转的具体实现如下：<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equi 查看详情
测试css3的动画效果在display:none的时候不耗费性能
1<!doctypehtml>2<html>3<head>4<metacharset="utf-8">5<title>TestTSSerializer</title>6<style>7.loadings{8width:120px;9height:120px;10/*background:#FFFFFF;*/11bo 查看详情
基于html5的高性能动画与游戏
...，HTML的新特性也是倍受开发者们追捧，自然相关HTML5的高性能动画与游戏的相关文章也是层出不穷的，笔者也是在12年接触的相关技术，不过俗话说“隔行如隔山”，随着大前端时代的到来，前端的工作范围和知识疆界也在不断... 查看详情
html5 canvas大sprite sheet图片动画性能优化
】html5canvas大spritesheet图片动画性能优化【英文标题】：html5canvaslargespritesheetimageanimationperformanceoptimization【发布时间】：2020-03-2205:22:17【问题描述】：我使用的方法来自http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-a 查看详情
html5+css3鼠标移入移出图片生成随机动画
...享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画，我们先看最终效果图（截图为静态效果，做出来可是动态的哟） 左右旋转 上下移动缩放由于时间关系我就不一步步解析各段代码所代表含义，我这里就给出... 查看详情
html5-用css3动画制作场景切换效果（移动，旋转，淡入淡出等）
1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>HTML5-页面切换动画</title>6<linkhref="animations.css"rel="stylesheet">7<scriptsrc="modernizr.custom.js 查看详情