How to make smooth movement of objects on the page?

Question

css

There is a square that adds 10px to its left. When clamped, there is jerky movement, how to make a smooth smooth movement?
I use vue.js, maybe it has its own solutions? Or suggest something.

Answer 1

CSS transform and transition instead of straight left - will be much smoother

Answer 2

https://codepen.io/you_web/pen/PexjKd
On the element that will move, set the property transition: 0.5s , where 0.5s is the transformation time
Vanik Khachatryan , look again, I changed the time to 2s and it became very smooth. If this is not enough, then you can play around with this - htmlbook.ru/css/transition-timing-function