Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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/
like image 939
Ignacio Correia Avatar asked Dec 23 '12 15:12

Ignacio Correia


People also ask

Can you animate transform CSS?

Animating your Transforms If you think that's cool, realise that CSS Animation can be applied not just to the transforms, but also to other CSS properties including: opacity, colour and a bunch of others.

How do you transition Transformation in CSS?

Specify the Speed Curve of the Transition The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end.

How do you rotate and translate in CSS?

transformation: translate(0,10%) rotate(25deg); The rotate operation is done first, then the translate . Show activity on this post. There is no need for that, as you can use css 'writing-mode' with values 'vertical-lr' or 'vertical-rl' as desired.

How do you make a smooth transition in CSS?

With CSS3 we can specify how an element changes by just describing its current and target states. CSS3 will create a smooth transition between these states by applying a cubic Bézier curve and gradually change the element appearance.


Video Answer


5 Answers

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

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

like image 173
Praveen Vijayan Avatar answered Oct 24 '22 10:10

Praveen Vijayan


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

like image 25
flec Avatar answered Oct 24 '22 09:10

flec


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>
like image 36
vsync Avatar answered Oct 24 '22 09:10

vsync


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)"
  });​
like image 24
Jason Lydon Avatar answered Oct 24 '22 09:10

Jason Lydon


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");
});
like image 35
Dustin Poissant Avatar answered Oct 24 '22 11:10

Dustin Poissant