Webkit CSS Анимация Вопрос о прыжке

Question

У меня есть анимация, настроенная с двумя вращающимися ящиками, меньшая коробка в большем поле. Он использует JS для добавления классов для анимации, паузы и возобновления.

В Webkit проблема, с которой я сталкиваюсь, находится в режиме мыши, что добавляет класс паузы и приостанавливает анимацию CSS, анимация возвращается в исходное состояние. Иногда он прыгает, как будто анимация никогда не останавливалась. Я попробовал анимацию-заполнить и добавить в конце анимации состояние. Все, что я искал и пытался, похоже, не помогло.

Любая помощь приветствуется.

Весь код здесь http://jsfiddle.net/qQcFy/105/

CSS Animation Код

@-webkit-keyframes circle { 
    from { 
     -webkit-transform:rotate(0deg); 
    } 
    to { 
     -webkit-transform:rotate(360deg); 
    } 
} 

@-webkit-keyframes inner-circle { 
    from { 
     -webkit-transform:rotate(0deg); 
    } 
    to { 
     -webkit-transform:rotate(-360deg); 
    } 
} 

#rotator.is-rotating { 
    -webkit-transform:rotate(360deg); 
    -webkit-animation: circle 55s linear infinite; 
    -webkit-animation-fill-mode: forwards; 
} 

#rotator.is-rotating.is-paused { 
    -webkit-animation-play-state: paused; 
} 

#rotator .box.is-rotating { 
    -webkit-transform:rotate(-360deg); 
    -webkit-animation: inner-circle 55s linear infinite; 
    -webkit-animation-fill-mode: backwards; 
} 

#rotator .box.is-rotating.is-paused { 
    -webkit-animation-play-state: paused; 
} 

.box { 
    display: inline-block; 
    overflow: hidden; 
    font-size: 12px; 
    border:1px solid black; 
    background-color:#ccc; 
    text-align:center; 
} 

.box-small { 
    margin: 5px auto 0; 
    display: block !important; 
    height: 46px; 
    width: 47px; 
} 

Answer 1

Добавить ...

-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000; 

... к чему вы упразднен. Предполагается работать на основании этой документации here ...