Improving CSS3 Transition Performance

Improving CSS3 transition performance

Before the will-change directive, you couldn't do this in the same literal way that you can in other languages. The browser (or at least Webkit) dealt with rendering the page by drawing various layers. It should in theory be intelligent enough to work out the layers for you, but sometimes it was a good idea to force something into its own layer.

Sometimes that worked, sometimes it didn't, depending on exactly what's going on.

Anyway.

In CSS, one way to force something into a layer is to transform it using a 3D transform. A common strategy is to add either:

transform: translateZ(0);

or the equivalent:

transform: translate3d(0,0,0);

or the slightly crazy:

transform: rotateZ(360deg);

or the translate ones combined with:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

if things are flickery.

These create a new layer as that's what the spec defines. From http://www.w3.org/TR/css3-transforms/#transform-property,

"Any value other than ‘none’ for the transform results in the creation
of both a stacking context and a containing block."

These all need careful testing, and aren't something to just always bung on anything that might need it – sometimes it's better, sometimes it's no different, and sometimes it's worse!

Good luck!

What are the golden rules to increase CSS3 transition performance on mobile devices?

Try to animate transform instead of left property, it works really smooth even on old iOS devices.

#navi {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#navi.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}

Fiddle: http://jsfiddle.net/x8zQY/2/

2017/01 update: Please read this great article about animation & GPU rendering, profiling and optimising techniques https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

Considerations for CSS3 Transition Performance

You have to be careful with this, as it can alter the z-index of the element it's applied to, but adding:

-webkit-transform-style: preserve-3d;

To the element you're applying the transition to, can speed animation up considerably, as it forces the hardware to use hardware acceleration for the animation.

If you do encounter layout bugs, you can just switch your 2d transitions to 3d values, so:

-webkit-transform: translate(100px, 100px)

becomes:

-webkit-transform: translate3d(100px, 100px, 0px)

You can see a demo of how this helps speed things up, at http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

If after applying this to the element, you see it or elements around it blink upon use, then use:

-webkit-backface-visibility: hidden;

To the element, and that should correct the problem.

These tips have helped me to produce fast, efficient CSS transitions, hope they help. :)

CSS3 Transitions: Is transition: all slower than transition: x?

Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won't see it, like the color changes, dimension changes etc.

The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to change the zoom level or the font's size and you'll see that everything become animated.Of course there couldn't be a lot of such user interactions, but there could be some interface changes that can cause the reflow and repaints in some blocks, that could tell the browser to try and animate those changes.

So, in general, it's recommended that you won't use the transition: all and would use the direct transitions instead.

There are some other things that can go wrong with the all transitions, like the splash of animation on page load, where it would at first render the initial styles for blocks and then apply the style with an animation. In a lot of cases it wouldn't be the thing that you want :)

Is applying a CSS transition on all elements a performance concern?

Transitioning certain properties, such as left and margin causes the browser to recalculate styles every frame. This can be one of the few cases where it can add noticeable weight to performance.

Other than that it is rather safe to use as many as you like, but as @SUJEET JAISWAL stated just make sure it doesn't create bad UX by going overboard too.

what's faster? CSS3 transitions or jQuery animations?

According to this link, jQuery animation is much slower then css animation.

Reason can be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling of Chrome or Firefox.

Which aspect makes my CSS transform page transition slow on mobile?

Animating shadows is usually discouraged. You can instead use a drop-shadow filter, like in the snippet below.

It would look something like this:

#big-me {  position: absolute;  left: 0px;  top: 0px;  letter-spacing: 0.04em;  font-size: 27vh;  line-height: 14vw;  font-family: 'Playfair Display';  font-style: italic;  font-variant: small-caps;  font-weight: lighter;  z-index: 1;  color: red;  filter: drop-shadow(-0.05vw 0.2vmin 0.4px black);  opacity: 0.7;  transform: translateX(-50%) translateX(50vw) translateY(-50%) translateY(50vh)  scale(0.75);  transition: opacity 0.3s, transform 0.3s, filter 0.3s;  will-change: transform;}
#big-me:hover {  opacity: 1;  filter: drop-shadow(-0.1vw 0.4vmin 5px black);  transform: translateX(-50%) translateX(50vw) translateY(-50%) translateY(50vh) scale(0.8);}

<a href="/me.html" id="big-me" class="transition-enlarge">ME</a>

---

Related Topics