Функция времени перехода CSS3

Question

Мне нужно анимировать мой div, как на слотах в this link. Я сделал несколько demo, но моя анимация работает неправильно. Я пытаюсь сделать это с jquery.easing.js, тем же результатом. Может кто-нибудь объяснить мне, что случилось, и как я могу это исправить.

Мой CSS:

.box { 
    width: 100px; 
    height: 100px; 
    position: relative; 
    top: 40px;  
    background: red; 
    -webkit-transition-duration: .2s; 
     transition-duration: 2s; 
     -webkit-transition-timing-function: cubic-bezier(.75, 1.95, .66,.56); 
     transition-timing-function: cubic-bezier(.75, 1.95, .66, .56); 
     -webkit-transition-property: top; 
} 
.box:hover{ 
    top: 500px; 
} 

Answer 1

Я думаю, что ваша проблема не то, что функция синхронизации не работает должным образом, но когда DIV движется, он теряет фокус и парить ...

Это то, что вы хотите?

.launcher { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: lightgreen; 
 
} 
 

 
.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    top: 10px; 
 
    left: 0px; 
 
    background: red; 
 
    -webkit-transition-duration: .2s; 
 
     transition-duration: 2s; 
 
     -webkit-transition-timing-function: cubic-bezier(.75, 1.95, .66,.56); 
 
     transition-timing-function: cubic-bezier(.75, 1.95, .66, .56); 
 
     -webkit-transition-property: left; 
 
} 
 
.launcher:hover + .box{ 
 
    left: 500px; 
 
}

<div class="launcher">hover me</div> 
 
<div class="box"></div>