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

User · Answer

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

_x000D_

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

_x000D_

#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_
}

_x000D_

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

_x000D_

User · Answer

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

User · Answer

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

User · Answer

div   css   -webkit-transform   translate 100px 100px         http   jsfiddle net xWCVf 5

User · Answer

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    x000D   x000D  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     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt h1 gt jQuery animate  lt pre gt transform translateY   lt  pre gt  lt  h1 gt  x000D   x000D   x000D

User · Answer

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

[jquery] How to animate CSS Translate

Examples related to jquery

Examples related to css

Examples related to jquery-animate

Examples related to jquery-transit