When using CSS, there are many ways to increase performance, from using only repaintless animations to minimising the effect of a repainting animation such as colour changing. Of course there are there downsides, such as only two – yes two – animatable attributes:

  1. opacity
  2. transform

At first, this may seem like they won't be useful. But in actuality… they can control almost everything about the element.

Let's take a look at what the transform attribute gives:

  1. matrix
    • matrix3d
  2. rotate
    • rotate3d
  3. scale
    • scale3d
  4. translate
    • translate3d
  5. skew
  6. perspective

Of course, there are some that can be classified as duplicates or not useful for general use. After we cut those out, we're left with:

  1. transform: rotate
  2. transform: scale
  3. transform: translate
  4. transform: skew

and of course:

  • opacity: #amount

So we have five useful properties, one that combines them and one that changes how visible they are, all that require NO REPAINTS!

Every single other property will require a repaint. If you're using any more than one or two, you'll see noticable frame drops. Especially on mobile devices.

Some examples:

  • Gooey loader – from ~20fps to a near solid 60, plus rotation. Original.
  • Stars/Bubbles – Triple the bubbles, yet many times the framerate. On a decent PC, it will never drop below 60. On a phone? After #201-300 are displayed to none, it runs at a solid 30 (easily 40). Original.

BUT

What if you need support for older browsers?

Well, instead of starting at zero and finishing at the moved value, what you can do instead is start at the inverse of the moved value and finish at zero, baking in legacy support for browsers. This has obvious benefits:

  1. You don't need to care as much about it looking the same in the end.
  2. It will run faster, respond near instantly and change almost excessively quickly.

This is the FLIP method - First, Last, Invert, Play. It reduces calculations because they've already happened.

Is there any more?

Not very much you can do more, as will-change does not greatly increase framerate, it does not prepare it properly for non-repaintless CSS to be applied.

Thank You for Reading.


1,880 1 3