Does Animating the Value of a CSS3 Transform with JavaScript Rule Out Hardware Acceleration

Does animating the value of a CSS3 transform with javascript rule out hardware acceleration?

It is hardware accelerated, but as Rich mentions, it's easier and more efficient to do it with CSS transitions. The thing is that animating 3d transforms with jQuery is not straightforward, if you do:

$('div').animate({
    '-vendor-transform' : "translate3d(100px,0,0)";
}, 500)

It doesn't work. Even if you do:

$('div').css("-webkit-transform", "translate3d(0,0,0)");
alert($('div').css("-webkit-transform"))

You don't get back translate3d(0,0,0), you get matrix(1, 0, 0, 1, 100, 0)

So you must write a lot of custom animation code involving matrices just to get things moving on screen.

Here is a custom animated 3d transform example: http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/, take a look at the source code to see if it's the level of javascript you are comfortable with.

Increasing the speed of hardware accelerated css3 animation

I think this is just a limitation of the current hardware acceleration implementations. Once the animation starts, off it goes.

(Folk wisdom - it's said to be a bad idea to give very large dimensions (aka width: 13000px) to blocks that you want to animate - it makes the GPU create huge objects)

Hardware accelerated CSS3 animations VS transitions VS jQuery animate for mobile

kirupa has a very good explaination here: http://www.kirupa.com/html5/css3_animations_vs_transitions.htm

Skip down to read his conclusions bullet point first and then start reading from the top to fill in the details. Basically, transition and animation are two different way you define animation in css. Below is my own translation of the author conclusion.

• Transition allow you to do very simple css that animate from a to b. Imagine you have an element with class="from-a" then you add a class to that element called class="to-b". Your transition definition in class="to-b" is where your animation ends.

• Animation allow you to define/orchestrate the entire animation using keyframe css definition. Keyframes allow you to breakdown and orchestrate series of complex animations.

• As you can see, because Transitions are based on adding of class or style to an element. You can easily define a series of classes and use with javascript+timeout to set these class and create the same kind of orchestration as Animation.

CSS: is transition: left/top GPU accelerated?

It's not accelerated. You have to use the specific CSS3 properties for it to be accelerateable. I think you'll find these links interesting:

http://www.html5rocks.com/en/tutorials/speed/html5/

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

Does animating the value of a CSS3 transform with javascript rule out hardware acceleration?

CSS3 Animations and best performance on mobile

Paul Irish wrote a great, in-depth breakdown of this very thing.

Usually 3d translation will trigger the GPU, if it doesn't, it's no big deal, it still works. Using translate over left/top coordinates is usually better performance-wise as well. I'm not sure about the animation keyframes part of the question though.

webkit translateX animation is rolling back to initial position

Do not use webkit animation for this as it comes back to the default values once played.
Instead define

.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%);
}

and using Javascript, either set -webkit-transform: translateX(100%); or add a CSS class to your element which set the final transform value and webkit will animate it properly

How to convert this CSS animation to use GPU level, instead of updating layer tree

If you want to avoid repainting and move the animation to GPU then you could use 3D transforms to produce the effect instead of animating the width. As mentioned in this article, using 3D transforms mean that the browser would make the animation GPU accelerated.

CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine. So what exactly forces the browser to swap to GPU mode? Many browsers provide GPU acceleration by means of certain CSS rules.

Currently, browsers like Chrome, FireFox, Safari, IE9+ and the latest version of Opera all ship with hardware acceleration; they only use it when they have an indication that a DOM element would benefit from it. With CSS, the strongest indication is that a 3D transformation is being applied to an element.

Converting the animation into its 3D transform equivalent itself is not a big process. All that is needed is to set a initial width on all the three elements and convert the width within the @keyframes rules into their corresponding ratio value based on the initial width that is set.

A width animation is generally just a scaleX but scale3d is used since we need the animation to be moved to the GPU. Since scale3d takes 3 parameters (for scale in each of the three axes), we can provide 1 (initial scale) as the value for the other two axes. So, it would be scale3d(x ratio, 1, 1).

For example, the 10% frame provided in question has width: 11px setting and here is how we can get its equivalent scale3d value:

• Set an initial or starting width on the element. In the below snippet, I have set it as 17px.
• Get the scale ratio for the X-axis based on the initial width and the required width. That would be, 11px / 17px (which is 0.64).
• So, the equivalent 3D scale transform would be scale3d(0.64, 1, 1).

@keyframes color-bar {  0% {    transform: scale3d(1,1,1);  }  10% {    transform: scale3d(0.64,1,1);  }  20% {    transform: scale3d(2.17,1,1);  }  30% {    transform: scale3d(1.76,1,1);  }  40% {    transform: scale3d(0.88,1,1);  }  50% {    transform: scale3d(0.58,1,1);  }  60% {    transform: scale3d(1.41,1,1);  }  70% {    transform: scale3d(1,1,1);  }  80% {    transform: scale3d(1.23,1,1);  }  90% {    transform: scale3d(1.88,1,1);  }  100% {    transform: scale3d(1,1,1);  }}.lines-ani {  width: 25vw;  transform: rotateY(180deg);}.lines-ani .lines {  position: relative;  width: 17px;  height: 10px;  background: red;  transform-origin: left;  animation: color-bar 1.5s 2s ease-out alternate infinite;}.lines-ani .lines:before {  position: absolute;  content: '';  top: 125%;  height: 100%;  width: 100%;  background: green;  transform-origin: left;  animation: color-bar 1.5s 1.5s ease-out alternate infinite;}.lines-ani .lines:after {  position: absolute;  content: '';  top: 250%;  height: 100%;  width: 100%;  background: green;  transform-origin: left;  animation: color-bar 1.5s 2.5s ease-out alternate infinite;}

<div class='lines-ani'>  <div class='lines'>  </div></div>

---

Related Topics