Сообщение от 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>