Edit in JSFiddle

var p = document.querySelector('.example_path');
var c = document.querySelector('.example_block');

p.addEventListener('click', function () {
    move(c);
}, false);

function move(elem) {
    var left = 0;
    
    function frame() {
        ++left;
        elem.style.left = left + 'px';
        if (left === 100) {
            clearInterval(id);
        }
    }
    
    var id = setInterval(frame, 10);
}

<div class="example_path">
    <div class="example_block"></div>
</div>

.example_path {
    position: relative;
    overflow: hidden;
    width: 530px;
    height: 30px;
    border: 3px solid #000;
}
.example_path .example_block {
    position: absolute;
    background-color: blue;
    width: 30px;
    height: 20px;
    padding-top: 10px;
    text-align: center;
    color: #fff;
    font-size: 10px;
    white-space: nowrap;
}