javascript event-handling dom-events css-transitions css-transforms

Event handler not working after once on click

Here I simply trying to animate on every click, but its not happening more than once. In the first click it works but after that it doesn't. Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Hudai</title>
    <style type="text/css" media="screen">
        #one {
            border: 1px solid red;
        }
        #two {
            border: 1px solid blue;
        }   
        #three {
            border: 1px solid green;
        }       
    </style>
</head>
<body>
    <button id="ok" type="submit"></button>
    <div>
        <div id="one">
            <p>One is here</p>
        </div>
        <div id="two">
            <p>Two is here</p>
        </div>  
        <div id="three">
            <p>Three is here</p>
        </div>      
    </div>
    <script>
        var button = document.getElementById('ok');
        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var three = document.getElementById('three');

        button.addEventListener('click', animate);
        function animate() {
            one.style.transition = 'transform 0.1s ease-in-out';
            two.style.transition = 'transform 0.1s ease-in-out';
            three.style.transition = 'transform 0.1s ease-in-out';
            one.style.transform = 'translateX(10px)';
            two.style.transform = 'translateX(10px)';
            three.style.transform = 'translateX(10px)';
        }
    </script>
</body>
</html>

Is there something to do with the transform property or am I calling the eventListener wrong?

Solution

animation run once because elements stay on position 10px

this will return element back, and new click will call new animation

function animate() {
        one.style.transition = 'transform 0.1s ease-in-out';
        two.style.transition = 'transform 0.1s ease-in-out';
        three.style.transition = 'transform 0.1s ease-in-out';


        one.style.transform = 'translateX(10px)';
        two.style.transform = 'translateX(10px)';
        three.style.transform = 'translateX(10px)';

        setTimeout(function() {
            one.style.transform = 'translateX(0px)';
            two.style.transform = 'translateX(0px)';
            three.style.transform = 'translateX(0px)';
        }, 500)
    }

Or you should change translate x, like this

    var button = document.getElementById('ok');
    var one = document.getElementById('one');
    var two = document.getElementById('two');
    var three = document.getElementById('three');

    var pos = 10;

    button.addEventListener('click', animate);
    function animate() {
        one.style.transition = 'transform 0.1s ease-in-out';
        two.style.transition = 'transform 0.1s ease-in-out';
        three.style.transition = 'transform 0.1s ease-in-out';


        one.style.transform = 'translateX(' + pos + 'px)';
        two.style.transform = 'translateX(' + pos + 'px)';
        three.style.transform = 'translateX(' + pos + 'px)';

        pos += 10
    }

If you want to push elements further