Transform: Translate(-50%, -50%)

What is the CSS transform:translate() property ultimately for?

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.

Jquery translate multiple times with button

You can try this:-

var count = 1;
$('button').click(function (event) {
    event.preventDefault();
    $('section').css({
        '-webkit-transform': 'translateY(' + (100 * count) + '%) '
    });
    count += 1;
});

• First time button is clicked count would be 1, so translateY would correspond to 100*1=100%
• Second time count is incremented by 1, so translateY would be 100*2=200%
• and so on...

CSS Transition: one transform property, not the other

Not an ideal solution (from a purist's point of view), but have you considered wrapping the element inside another and just applying the transform to that one?

Remove hover effect after the element has moved away from mouse pointer

Posting my comment as answer,

The workaround here can be tweaking the z-index on every transition event.

Updated Fiddle

Notice the below CSS changes

.hoverTweak{    //new class
    z-index: 2 !important;
}

.dashboard-submenu-item {
    display: inline-block;
    position: absolute;
    top: 33%;
    left: 17%;
    z-index: 0;            //change
    color: #e50654;
    transform: translate(0%, 0%);
}

Creating a Simple Element Scroll Animation (javascript/css)

I found a solution with lerp. This works great, for my scenario. Using react-spring, interpolation, animate, and Spring, you can create this easily. The element starts at the far end of either side of the screen, and when you scroll, the element slowly moves inwards and stops at (0,0). I added the page width back to the interpolation function so it doesn't start it out at 0.

<Spring
  native
  from={{
    x:
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight,
  }}
  to={{
    x: props.position.y,
  }}
>
  {({ x }) => (
    <animated.p
      style={{
        transform: x.interpolate(
          (x) =>
            `translate(${
              x +
              document.documentElement.scrollHeight -
              document.documentElement.clientHeight
            }px,0)`
        ),
      }}
    >
      ELEMENT
    </animated.p>
  )}
</Spring>;