Как отменить анимацию на мыши после зависания

Таким образом, на мыши можно иметь обратную анимацию, например:

.class{ transform: rotate(0deg); } .class:hover{ transform: rotate(360deg); } 

но при использовании анимации @keyframes я не мог заставить ее работать, например:

 .class{ animation-name: out; animation-duration:2s; } .class:hover{ animation-name: in; animation-duration:5s; animation-iteration-count:infinite; } @keyframe in{ to {transform: rotate(360deg);} } @keyframe out{ to {transform: rotate(0deg);} } 

Какое оптимальное решение, зная, что мне нужны итерации и анимация?

http://jsfiddle.net/khalednabil/eWzBm/

Я думаю, что если у вас есть, вы должны использовать a. Я бы подумал о чем-то вроде:

 @keyframe in { from: transform: rotate(0deg); to: transform: rotate(360deg); } @keyframe out { from: transform: rotate(360deg); to: transform: rotate(0deg); } 

Конечно, должно быть, это уже проверили, но мне показалось странным, что вы используете свойство transform потому, что CSS3 не полностью реализована повсеместно. Возможно, это будет работать лучше со следующими соображениями:

  • Chrome использует @-webkit-keyframes , не @-webkit-keyframes особой версии
  • Safari использует @-webkit-keyframes с версии 5+
  • Firefox использует @keyframes с версии 16 (v5-15 используется @-moz-keyframes )
  • Opera использует @-webkit-keyframes версии 15-22 (только v12 используется @-o-keyframes )
  • Internet Explorer использует @keyframes с версии 10+

РЕДАКТИРОВАТЬ :

Я придумал эту скрипку:

http://jsfiddle.net/JjHNG/35/

Использование минимального кода. Это приближается к тому, что вы ожидали?

Это намного проще, чем все это: просто перейдите к тому же свойству на свой элемент

 .earth { width: 0.92%; transition: width 1s; } .earth:hover { width: 50%; transition: width 1s; } 

https://codepen.io/lafland/pen/MoEaoG

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

Я не нашел способа вызвать анимацию CSS специально для выведения без использования JavaScript для добавления classов «сверху» и «вне». Хотя вы можете использовать базовое объявление CSS, запускающее анимацию при завершении: hover, эта же анимация будет запускаться при загрузке страницы. Используя classы «over» и «out», вы можете разделить определение на базовую (load) декларацию и две объявления анимации-триггера.

CSS для этого решения будет:

 .class { /* base element declaration */ } .class.out { animation-name: out; animation-duration:2s; } .class.over { animation-name: in; animation-duration:5s; animation-iteration-count:infinite; } @keyframes in { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes out { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } 

И использование JavaScript (синтаксис jQuery) для привязки classов к событиям:

 $(".class").hover( function () { $(this).removeClass('out').addClass('over'); }, function () { $(this).removeClass('over').addClass('out'); } ); 

Не лучше ли было бы иметь только одну анимацию, но с ее отменой?

 animation-direction: reverse 

Попробуй это:

 @keyframe in { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframe out { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } 

поддерживается в Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

  • jQuery для переключения анимации
  • Начало анимации по кадрам
  • Android-анимация не повторяется
  • Как анимировать путь на canvasе - андроид
  • Пользовательская анимация для нажатия UIViewController
  • Анимированная иконка для ActionItem
  • Реверсирование анимации
  • Восстановить пре-iOS7 UINavigationController pushViewController animation
  • как я могу использовать анимацию в cocos2d?
  • Как сделать анимацию линии более гладкой?
  • Android: развернуть / свернуть анимацию
  • Давайте будем гением компьютера.