Home/ Questions/Q 8100025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T22:37:21+00:00

In CSS3, animations were introduced under the various vendor prefixes, with the transition properties.

  • 0

In CSS3, animations were introduced under the various vendor prefixes, with the transition properties. Now, at-least in pure CSS there are two ways to make an element change position.

  1. Setting the element’s position as absolute and fiddle with left: right: top: and bottom:
  2. Using -vendor-transform:translate(X,Y,Z)

Now, strictly on the point of transform:translate(), aside from one’s ability to use translateZ(), the only difference between them is that the latter is not a reported value; other than parsing the property itself the translation is not computed style. However, if this was not necessary, is the latter actually the better choice for animation and positioning elements that are otherwise in a position:fixed configuration?

Im particularly interested in making a quite heavy webapp that needs to run on mobile devices as well as browsers so as a result backwards compatibility is not so much an issue. Mobile browsers these days tend to be at-least ‘modern.’

So ultimately, my question is, what exactly is transform:translate() for, according to the makers of CSS3’s spec? Where was it built to be used over LRTB transforms, and would it be possible to make use of it in a way that is appreciably superior for the sake of render speed, animation smoothness, and visual stability when hardware acceleration (-webkit-transform: translateZ(0);) is employed? For those who don’t know, sometimes in webkit elements can flicker in hardware accelerated environments.

In any case, I’m just looking for the best and most up to date layout solutions for my web-apps that can leverage CPU and GPU most effectively so they can run at very well optimized FPS (as far as transitions and, in some cases, scrolling are concerned) A great example of the type of smoothness that would be most desirable is this http://www.webkit.org/blog-files/leaves/ (yes, I did read its source.)

Any input?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    what exactly is transform:translate() for, according to the makers of CSS3’s spec?

    It says:

    For backwards compatibility with existing SVG content, this specification supports all transform functions defined by The ‘transform’ attribute in [SVG11].

    As for the other parts of your question, not sure if it’s possible to give a general answer.

    I think it’s best to run some performance test for your particular situation. That shouldn’t be hard to do if your app is well-designed. Also, such design may allow for per-device optimization, where translations and offsets are used respectively.

    • 0