CSS animation multiple alignment issue
I was trying to run two animations placed in two different places at the same time to move them apart from each other using JavaScript - {{id}}.className
. But as soon as the animation starts, the second element with the id is p2
automatically moved from its original position just before the animation starts.
Here is my Codepen link. And yes, I am using Bootstrap with this.
Can anyone help me?
source to share
UPDATED
You remove all values class
from the two divs
when the button is pressed.
So just replace:
e2.className = "pop2";
e1.className = "pop1";
By:
e2.classList.add('pop2');
e1.classList.add('pop1');
This will add the new one class
(pop1 and pop2) to the other existing defaults (col-sm-7 and col-sm-5) and it works great.
source to share