[jquery] How to animate CSS Translate

Is it possible to animate the CSS property translate via jquery?

$('.myButtons').animate({"transform":"translate(50px,100px)"})

and does it work in many browsers?

Demo not working: http://jsfiddle.net/ignaciocorreia/xWCVf/

UPDATE:

My solutions:

1. Simple implementations - http://jsfiddle.net/ignaciocorreia/R3EaJ/
2. Complex implementation and multi-browser - http://ricostacruz.com/jquery.transit/

I too was looking for a good way to do this, I found the best way was to set a transition on the "transform" property and then change the transform and then remove the transition.

I put it all together in a jQuery plugin

https://gist.github.com/dustinpoissant/8a4837c476e3939a5b3d1a2585e8d1b0

You would use the code like this:

$("#myElement").animateTransform("rotate(180deg)", 750, function(){
  console.log("animation completed after 750ms");
});

There's an interesting way which this can be achieved by using jQuery animate method in a unique way, where you call the animate method on a javascript Object which describes the from value and then you pass as the first parameter another js object which describes the to value, and a step function which handles each step of the animation according to the values described earlier.

Example - Animate transform translateY:

var $elm = $('h1'); // element to be moved_x000D_
_x000D_
function run( v ){_x000D_
  // clone the array (before "animate()" modifies it), and reverse it_x000D_
  var reversed = JSON.parse(JSON.stringify(v)).reverse();_x000D_
  _x000D_
  $(v[0]).animate(v[1], {_x000D_
      duration: 500,_x000D_
      step: function(val) {_x000D_
          $elm.css("transform", `translateY(${val}px)`); _x000D_
      },_x000D_
      done: function(){_x000D_
          run( reversed )_x000D_
      }_x000D_
  })_x000D_
};_x000D_
_x000D_
// "y" is arbitrary used as the key name _x000D_
run( [{y:0}, {y:80}] )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<h1>jQuery animate <pre>transform:translateY()</pre></h1>

There are jQuery-plugins that help you achieve this like: http://ricostacruz.com/jquery.transit/

You need set the keyframes animation in you CSS. And use the keyframe with jQuery:

$('#myTest').css({"animation":"my-animation 2s infinite"});

#myTest {_x000D_
  width: 50px;_x000D_
  height: 50px;_x000D_
  background: black;_x000D_
}_x000D_
_x000D_
@keyframes my-animation {_x000D_
  0% {_x000D_
    background: red;  _x000D_
  }_x000D_
  50% {_x000D_
    background: blue;  _x000D_
  }_x000D_
  100% {_x000D_
    background: green;  _x000D_
  }_x000D_
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="myTest"></div>

According to CanIUse you should have it with multiple prefixes.

$('div').css({
    "-webkit-transform":"translate(100px,100px)",
    "-ms-transform":"translate(100px,100px)",
    "transform":"translate(100px,100px)"
  });?