Permalink
Browse files

Updated info about hardware acceleration

  • Loading branch information...
1 parent 38a7eca commit bf79011553bf6257bf996a06bb9aa7b9930ef2e7 @richbradshaw committed Feb 14, 2012
Showing with 2 additions and 3 deletions.
  1. +1 −1 index.php
  2. +0 −1 references.php
  3. +1 −1 transitions.php
View
@@ -78,7 +78,7 @@
<p>None of the actual animation uses javascript, though I am using <a href="http://jquery.com">jQuery</a> to add and remove classes to add interactivity. You can use the :target pseudo selector to do this in some cases, but I'm keeping it simple and extensible here.</p>
<p>If you are using iOS, replace hover with touch and hold wherever appropriate. (Check the script in the head if you are wondering how to replicate that effect.)</p>
<p>For most transitions I've just used two images to keep the examples simple. Most should be easy to extend to different content (videos, text, etc) or more than two images, though you may need to add and remove appropriate classes with JS in order to get the desired effect.</p>
- <p>Of particular note is that animations that don't require a repaint (transforms and opacity) are hardware accelerated on iOS, so if you are building a mobile site you definitely should be using this rather than things like the jQuery animate method.</p><p>To see a demo showing exactly how much faster transitions are than the older methods of doing things, check <a href="/demos/speed.php">the speed comparison</a>.</p>
+ <p>Of particular note is that animations that don't require a repaint (transforms and opacity) are hardware accelerated on Webkit, so if you are building a mobile site you definitely should be using this rather than things like the jQuery animate method.</p><p>To see a demo showing exactly how much faster transitions are than the older methods of doing things, check <a href="/demos/speed.php">the speed comparison</a>.</p>
<p>To make it easier to view source and copy, I'm putting style and script tags in each section, just before the demo. This isn't recommended for production use, but in this instance it will hopefully help.</p>
<p>Any suggestions/improvements/etc, contact me via my gmail account (rich.bradshaw), or on Twitter (<a href="http://twitter.com/richbradshaw">richbradshaw</a>).</p>
<p>Keep reading to see the main explanations, or for some more experimental demos with less explanation, check out the <a href="/demos/">demos page</a>.</p>
View
@@ -7,7 +7,6 @@
<li><a href="http://www.w3.org/TR/css3-3d-transforms/">W3C: CSS 3D Transforms Module Level 3</a></li>
<li><a href="http://www.w3.org/TR/css3-animations/">W3C: CSS Animations Module Level 3</a></li>
<li><a href="http://webkit.org/blog/">Surfin' Safari (check the archives)</a></li>
- <li><a href="http://www.opera.com/docs/specs/presto23/css/transitions/">CSS3 Transitions support in Opera Presto 2.3</a></li>
<li><a href="http://desandro.github.com/3dtransforms/">David Desandro's 3D transform examples</a></li>
</ul>
</section>
View
@@ -287,7 +287,7 @@
</div>
<h2>Animatable properties</h2>
-<p>Regarding the properties you can animate, the best way is to experiment. The W3C maintain a list of properties that can be animated on the <a href="http://www.w3.org/TR/css3-transitions/#properties-from-css-">CSS Transitions spec</a>. These include everything from background-color and letter-spacing to text-shadow and min-height. Many of these properties are not supported by default by jQuery animation, making CSS transitions much more useful out of the box. In addition, iOS hardware accelerates animations that don't require repaints, namely opacity and 3D transforms.</p>
+<p>Regarding the properties you can animate, the best way is to experiment. The W3C maintain a list of properties that can be animated on the <a href="http://www.w3.org/TR/css3-transitions/#properties-from-css-">CSS Transitions spec</a>. These include everything from background-color and letter-spacing to text-shadow and min-height. Many of these properties are not supported by default by jQuery animation, making CSS transitions much more useful out of the box. In addition, many browsers hardware accelerate animations that don't require repaints, namely opacity, 3D transforms and filters. To see the methods that Webkit accelerates, take a look at <a href="http://trac.webkit.org/browser/trunk/Source/WebCore/page/animation/AnimationBase.cpp">the AnimationBase.cpp</a> code from the Webkit source. At the time of writing there are three classes defined here: PropertyWrapperAcceleratedOpacity, PropertyWrapperAcceleratedTransform and PropertyWrapperAcceleratedFilter. These are the animations that Webkit accelerates. Other browsers do things differently, but as Webkit is popular on mobile where these things matter most, it's worth noting this special case.</p>
<p>In reality, browsers are allowing more properties than these to be animated - box-shadow springs to mind as an obvious example. The table below is taken from the link above, and is can be considered the minimum number of properties you would expect to be animatable.</p>
<table class="table">
<tbody>

0 comments on commit bf79011

Please sign in to comment.