Бесконечная равномерная анимация
 

Сомневаюсь, но на всякий случай спрошу:
как реализовать без таймеров (а может эмулировать с помощью таймеров?) равномерное движение?
То есть по ховеру изменяем css.left, курсор ушёл - движение прекратилось.
и так, и сяк пробовал - всё рывками.

CSS анимации Вам в помощь :

<style>
div {
    background-color: #BADA55;
    width: 50px;
    height: 50px;
    position: absolute;
    
    -webkit-animation: loop 2s ease 0s infinite normal;
    -moz-animation: loop 2s ease 0s infinite normal;
    animation: loop 2s ease 0s infinite normal;

    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
div:hover {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes loop{
    0% {
        -webkit-transform: translateX(0px);
    }

    50% {
        -webkit-transform: translateX(100px);
    }

    100% {
        -webkit-transform: translateX(0);   
    }
}

@-moz-keyframes loop{
    0% {
        -moz-transform: translateX(0px);
    }

    50% {
        -moz-transform: translateX(100px);
    }

    100% {
        -moz-transform: translateX(0);   
    }
}

@keyframes loop{
    0% {
         transform: translateX(0px);
    }

    50% {
        transform: translateX(100px);
    }

    100% {
        transform: translateX(0);   
    }
}
</style>
<div></div>

Опера и IE идут лесом.
Но я сам ступил... Надо просто корректно указывать конечное значение css.left, а не использовать приращение.

А почему вы не используете jquery .animation()?
И таких проблем не будет.
Либо как предложил melky, все очень плавно и работать будет во всех сравнительно новых браузерах)