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

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

.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/

Ответы

Ответ 1

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

@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, не требуется какая-либо особенная версия
  • 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/

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

Ответ 2

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

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

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").hover(
    function () {
        $(this).removeClass('out').addClass('over');
    },
    function () {
        $(this).removeClass('over').addClass('out');
    }
);

Ответ 3

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

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

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

Ответ 4

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

animation-direction: reverse

Ответ 5

Попробуйте следующее:

@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 +