Остановка анимации Webkit и обратная связь

Question

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

http://jsfiddle.net/hornerlas/xFhkm/16/ - Вот скрипка.

Очевидно, я немного поработал и нашел маленький minx, который они называют режимом заполнения. weirdly -webkit-animation-fill-mode: forwards; не работает для меня. Я знаю, что есть несколько вопросов об этом, но я бы не опубликовал его, если бы нашел хороший.

Я бы предпочел не заниматься этим в JS, но это похоже на очевидное обходное решение в этот момент.

Спасибо всем, если вы хотите просто посмотреть код ... вот оно.

CSS

.hi { 
     width: 171px; 
     height: 171px; 
     background-image: url([URL]); 

     -webkit-animation: play .3s steps(6) 1; 
     -moz-animation: play .3s steps(6) 1; 
     -ms-animation: play .3s steps(6) 1; 
     -o-animation: play .3s steps(6) 1; 
     animation: play .3s steps(6) 1; 
    } 

    .hi:hover 
    { 
    -webkit-animation-play-state:running; 
    -webkit-animation-direction: reverse; 
    } 

    @-webkit-keyframes play { 
    from { background-position: 0px; } 
     to { background-position: -1026px; } 
    } 

    @-moz-keyframes play { 
    from { background-position: 0px; } 
     to { background-position: -1026px; } 
    } 

    @-ms-keyframes play { 
    from { background-position: 0px; } 
     to { background-position: -1026px; } 
    } 

    @-o-keyframes play { 
    from { background-position: 0px; } 
     to { background-position: -1026px; } 
    } 

HTML

<div class="hi"></div> 

Answer 1

Не совершенным, но он работал

.hi { 
    width: 171px; 
    height: 171px; 
    background-image: url("http://www.samhorner.co.uk/images/locqicomingsoon.png"); 

    -webkit-animation: play 3s;/* i think you have some wrong in its value */ 
     -moz-animation: play 3s; 
     -ms-animation: play 3s; 
     -o-animation: play 3s; 
      animation: play 3s; 

    -webkit-animation-fill-mode:forwards; 
    -webkit-animation-play-state:paused;/* pause when initialize */ 
} 

.hi:hover 
{ 
    -webkit-animation-play-state:running; 
    -webkit-animation-direction: reverse; 
} 

@-webkit-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -1026px; } 
} 

@-moz-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@-ms-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@-o-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

Синтаксис

animation: name duration timing-function delay iteration-count direction; 

Подробнее здесь Animation

Answer 2

Итак, после небольшого поиска мы обнаружили, что на самом деле есть небольшая ошибка, которая останавливает режим заполнения, работающий с фоновой позицией. Это полностью прекращает работу. Вы можете протестировать это с помощью jsfiddle, просто добавив переход, а не фона. Надеюсь, он скоро исправится.

Короче ...

• Существует ошибка остановки этого не произошло из-за фона позиции.
• Используйте Javascript, если вам нужен этот эффект для работы.

Answer 3

На самом деле этим вечером я работал несколько схожим вопросом, желая иметь одну из этих трехмерных круговых каруселей, которые вращаются в одну сторону, когда: зависание было над чем-то, а в другом направлении, когда: наведите указатель мыши на другой.

После того, как вы отправились в кругосветное путешествие со специями, перелистывая спецификации w3c и тому подобное, я понял, почему он не будет работать именно так, но по пути решения этой маленькой головоломки CSS я, возможно, мысль о вашей ситуации.

что-то: парить #themovingthing {} что-то: нет (: зависать) #themovingthing {}

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

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