How to animate CSS Translate

Question

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:

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

I'll take a guess, and say it only works in webkit browsers, if at all! — adeneo, Dec 23 '12 at 15:20
I found this example: http://jsfiddle.net/qGEmy/7/ but I cant seem to get it to work with my example. — Ignacio Correia, Dec 23 '12 at 15:25
And here's how you do it -> [**FIDDLE**](http://jsfiddle.net/adeneo/xWCVf/2/) — adeneo, Dec 23 '12 at 15:27
You could also do that without translate, altering left and top positions... http://jsfiddle.net/xWCVf/4/ — XCS, Dec 23 '12 at 15:36
That one I know but thanks anyway. I really want and need to play with translate. — Ignacio Correia, Dec 23 '12 at 15:43
Use .css() instead of animate, and add a CSS transition. Read http://css3.bradshawenterprises.com/transitions/ to help you. — Rich Bradshaw, Dec 23 '12 at 15:45

Praveen Vijayan · Accepted Answer · 2012-12-23T15:48:56.723

11

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

http://jsfiddle.net/xWCVf/5/

edited Dec 23 '12 at 15:48

answered Dec 23 '12 at 15:33

Praveen Vijayan

6,521
2
29
28

1

Just add a CSS transition to it. – Rich Bradshaw Dec 23 '12 at 15:45
@IgnácioR.Correia - Updated link – Praveen Vijayan Dec 23 '12 at 15:49
1

EASY :D ! Thanks. You solution and http://ricostacruz.com/jquery.transit/ are the way to go! Thanks to all. – Ignacio Correia Dec 23 '12 at 15:55
2

A side note you don't need to use the vendor, jQuery 1.7+ add this correctly. – Neil Sep 17 '14 at 14:14
1

You should also edit to add that you need to add a CSS transition to it – krummens Feb 27 '17 at 21:37

score 8 · Answer 2 · answered Dec 23 '12 at 15:25

8

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

answered Dec 23 '12 at 15:25

flec

2,891
1
22
30

2

Lets try it. All I wanted is to add one line of code to my site. It does not required an entire library. – Ignacio Correia Dec 23 '12 at 15:27
2

@IgnácioR.Correia If you are looking for a cross-browser solution I think a plugin/library is the way to go. Besides with jQuery you are already using a library. – flec Dec 23 '12 at 15:31
I am already playing with it. Very cool. Works like a charm. Thanks. – Ignacio Correia Dec 23 '12 at 15:34

vsync · Answer 3 · 2017-08-24T11:26:45.043

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

function run( v ){
  // clone the array (before "animate()" modifies it), and reverse it
  var reversed = JSON.parse(JSON.stringify(v)).reverse();
  
  $(v[0]).animate(v[1], {
      duration: 500,
      step: function(val) {
          $elm.css("transform", `translateY(${val}px)`); 
      },
      done: function(){
          run( reversed )
      }
  })
};

// "y" is arbitrary used as the key name 
run( [{y:0}, {y:80}] )

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

score 6 · Answer 4 · answered May 16 '14 at 16:00

6

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)"
  });

answered May 16 '14 at 16:00

Jason Lydon

7,074
1
35
43

3

As of jQuery 1.8 you no longer need to specify vendor prefixes. http://api.jquery.com/css/#css2 – davidgoli Dec 09 '15 at 20:29
4

The original poster asked about *animation* which this code does not do. – Simon East Apr 12 '17 at 23:27

score 1 · Answer 5 · answered Apr 13 '17 at 17:01

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");
});

score -1 · Answer 6 · answered Jul 12 '16 at 14:52

-1

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

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

#myTest {
  width: 50px;
  height: 50px;
  background: black;
}

@keyframes my-animation {
  0% {
    background: red;  
  }
  50% {
    background: blue;  
  }
  100% {
    background: green;  
  }
}

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

answered Jul 12 '16 at 14:52

GIA

1,400
2
21
38

1

Unfortunately this does not answer the original question about animating `transform: translate()` specifically. – Simon East Apr 12 '17 at 23:31

How to animate CSS Translate

6 Answers6

Example - Animate transform `translateY`:

Linked

Related

How to animate CSS Translate

6 Answers6

Example - Animate transform translateY:

Linked

Related

Example - Animate transform `translateY`: