Показать сообщение отдельно
  #2 (permalink)  
Старый 25.04.2012, 19:41
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Nanto Посмотреть сообщение
Сомневаюсь, но на всякий случай спрошу:
как реализовать без таймеров (а может эмулировать с помощью таймеров?) равномерное движение?
То есть по ховеру изменяем 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>
Ответить с цитированием