CSS animation: move a div with the new position relative to the previous one

advertisements

for better performance, I want replace:

$('#foo').animate({ left: '+=42px' }, 500);

by a transition (or animation) CSS3. But how can we do to implement "+=" on left property in CSS?

How move a div with the new left position relative to the previous?

thx.


In vanilla-js you can't use +=, but you can get the old value instead:

document.getElementById('foo').onclick = function() {
  this.style.left = parseFloat(getComputedStyle(this).left) + 42 + 'px';
};
#foo {
  position: relative;
  left: 0;
  transition: 2s left;
}
<div id="foo">Click me multiple times</div>