Непрерывное вращение при выходе из зависания

Рассмотрим следующую скрипку: http://jsfiddle.net/a7EVf/5/

Возможно ли, чтобы div вращался (фактически на 360 градусов вместо 0) при зависании вместо того, чтобы двигаться назад против часовой стрелки?

Я бы предпочел НЕ использовать JavaScript (включая jQuery), если это возможно - я понимаю, что было бы достаточно просто установить

transform: rotate(360deg); /*also the vendor-specific versions*/

на оригинале с использованием JS (и как только он достигнет 360, сбросьте его до 0 без перехода), но возможно ли это сделать только с помощью CSS3?


css css-animations
person Patrick White    schedule 08.10.2013    source источник
comment
Ах, спасибо. Я исправил это, но потом скрипку не сохранил.   -  person Patrick White    schedule 08.10.2013
comment
что-то вроде этого?   -  person Pete    schedule 08.10.2013
comment
@Pete: Нет, это просто поворачивает его на 360 градусов при наведении, а затем обратно на 360 градусов против часовой стрелки при наведении. Я хочу повернуть его на 180 градусов по часовой стрелке при наведении, а затем еще на 180 градусов по часовой стрелке при зависании.   -  person Patrick White    schedule 08.10.2013
comment
Вы можете попробовать это с анимацией CSS3. Я не уверен, что это то, что вам нужно, и, следовательно, не добавляю в качестве ответа. Одна проблема, которую я заметил, заключается в том, что он также вращается один раз при загрузке :(   -  person Harry    schedule 08.10.2013
comment
@ Гарри: это здорово! Некоторые щелчки при перемещении мыши, но это кажется довольно неизбежным. Если бы вы добавили это в качестве ответа, я бы принял это.   -  person Patrick White    schedule 08.10.2013

Ответы (1)


arrow_upward
1
arrow_downward

Используя анимацию CSS3, мы можем заставить блок вращаться от 0 до 180 градусов при наведении, а затем вращаться от 180 до 360 градусов, когда он не зависает.

#block {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 100px;
  top: 100px;
  background: black;
  color: white;
  animation-name: out;  /* animation to rotate on hover out*/
  animation-duration: 1s;  /* duration for the animation, increase it to slow it down*/
}
#block:hover {
  animation-name: in;  /* animation to rotate on hover */
  animation-duration: 1s;
}
@keyframes in {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes out {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div id="block"></div>

Примечание.

  1. Это заставляет блок также вращаться при загрузке страницы. Для этого нет другого решения, кроме использования JS и устранения влияния на загрузку страницы.
  2. Как вы упомянули, при наведении и отводе через очень короткие промежутки времени происходит небольшая привязка. Это можно объяснить, просмотрев ответы здесь и здесь. Как только анимация больше не применима (то есть, селектор больше не применим), анимация резко останавливается и возвращается в исходное непреобразованное положение.
person Harry    schedule 08.10.2013