The object moves along the bar using code.

$('#telo').css('transform', 'translate(350px,0)');

I want him to lean slightly at the beginning of the movement, and at the end he was even back, trying to hang 2 at once,

 $('#telo').css('transform', 'translate(350px,0)'); $('#telo').css('transform', 'rotate(15deg)');

In this situation, the tilt first occurs, and there is no movement.

Example: https://jsfiddle.net/h3o5Lwkq/1/

  • You need to use the animation ... either css or jquery jsfiddle.net/h3o5Lwkq/3 - Alexey Shimansky
  • Animation does not work, the value is not always known in advance, to which the movement will be made. And if the jquery method is animate. It sometimes crashes, there is no smoothness. - zkolya

1 answer 1

Remove the second transformation into a function and call it on a timer.

 function run() { $('#telo').css('transform', 'translate(350px,0)'); } $("#btn1").click(function(){ $('#telo').css('transform', 'rotate(15deg)'); setTimeout(run, 250); })

https://jsfiddle.net/glebkema/gfs0cwet/

  • Thanks, that is necessary - zkolya
  • @zkolya Conveniently, the object itself straightens back and it does not need to be specifically described. If you add to trans # telo `transform-origin: 50% 95% 0;`, then the object does not turn around the center, but leans forward. And it's funny that now you can press the button again. If you set the timer to 800 milliseconds, the object has time to return to the start . - Gleb Kemarsky
  • Thank you, it is really, very cool, but can you make it so that at the end it deviates a little back and back exactly, as if it were a stop effect? - zkolya
  • @zkolya Option 1. After transition-timing-function, set the Bezier curve so that the animation at the start retreated in the opposite direction, and at the finish flew past and returned. See the updated jsfiddle.net/glebkema/gfs0cwet. I added a Bezier curve and increased the object's slope for clarity. And through the animation at the end returns to the start, the button can be pressed again. - Gleb Kemarsky
  • Option 2. All the same through the animation. jsfiddle.net/glebkema/Lpb5hjo9 - Gleb Kemarsky