Javaｓｃｒｉｐｔ和CSS3动画的结合

当HTML5，CSS3已成为主流，我也很习惯使用JS来做一些简单的动画，因为桌面上的浏览器，并不是所有的人都支持CSS3。用户也很奇怪，用户的习惯是不是每一个用户都可以训练。总是有很多人认为win7.win8是不是XP的好。但手机是非常不同的，和对HTML5和CSS3的手机浏览器的支持非常好，但手机的硬件处理能力是非常有限的。还有一个双核或单核手机像我在今天的四核和八核手机，虽然JS好的，单一的接触不多，感觉是不好的。一个简单的页面滑动，很流利，对i7的PC机上运行，但在我的双核心手机卡，吨，卡，和吨。这是非常令人沮丧的。为此，我也找了很久，看到了很多。最后，我发现了一个简单的方法来使用CSS3来完成动画。

在过去，对于动画来说，除了jQuery的动画和其他动画功能，setTimeout和setInterval来改变边缘属性，宽度和顶部的一个元素。而且，我有一个困惑。

首先，setTimeout、setInterval，这不是你的0ms能一直执行。秘密是无意中发现的时候，iscroll调试，定时器延时的计算依赖于浏览器的内置时钟，时钟的精度取决于时钟update.ie8和其以前的版本的IE版本更新的频率为15.6毫秒。在那之后，我认为这是10ms的1px位移，它不能在时间。

这张卡怎么了卡，因为代码写得不好。毕竟，JS是一个单线程的，如果有一个耗时的动作，UI不回应。虽然我们使用setTimeout，是因为setTimeout让我们看起来的界面并没有死，但它并不顺利。因为这个setTimeout执行后，另一个耗时的行动可能发生在中间间隔先下执行。然后setTimeout执行将被无限期推迟。还等什么卡！然而，该卡也可以触发浏览器布局下原因（即重新布局）改变原有财产的时候。问题是，它是不费时，但它是耗时的，它说它是耗时的，很多时候可以忽略，但在很多时候，这是不能忽视的。

除了上述两段，有一个问题，那就是，许多手机，它总是一个框架，也可以是一帧长帧短。这真是一个节奏，使人们浪费。为什么这样，它仍然与setTimeout延迟有一定关系。丢帧。这个问题涉及到显示器的刷新频率的问题实在太复杂。

最后，CSS3 JS动态改变元素的属性，使用过渡控制动画的执行时间。例如 uff1a

复制代码代码如下所示：

Js：

复制代码代码如下所示：

$（#测试）宽度（200）；

在这一秒，DIV的宽度将成为200px。不是孙武空桃一样瞬间改变，慢慢地，不卡顿，使用CSS动画有一个好处，它不是由时间JS的影响。虽然在浏览器UI线程的线程互斥的JS，CSS动画这不是真的，许多浏览器也可以启用硬件加速（例如：铬）。虽然在一般的情况下，浏览器的重新布局不是很明显，它应该尽可能的避免，所以增加了WebKit的变换：（0）translatez的动画元素，或Webkit的变换：translate3d（0,0,0），那么浏览器会自己把这层。即使重新布局是无法避免的，这是EA是小的，用翻译来替换毛利是一个非常明智的决定。

最后，有一些属性可以在进行常用更改时触发重新布局：

U3000 U3000

复制代码代码如下所示：

宽度

高度

衬垫

缘

显示

边框宽度

边境

最小高度

以上所有的内容，希望能够帮助你学习Javaｓｃｒｉｐｔ和CSS3，同时不足之处请原谅。