Непрерывная анимация вращения CSS при наведении, анимированная до 0deg при наведении

У меня есть элемент, который вращается, когда вы навеки над ним на неопределенный срок. Когда вы наводите курсор, анимация останавливается. Простой:

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

.elem:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

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

Любой вход был бы потрясающим!

Ответы

Ответ 1

Решение - установить значение по умолчанию в вашем .elem. Но это аннулирование работает отлично с -moz, но еще не реализовано в -webkit

Посмотрите на скрипт, который я обновил от вашего: http://jsfiddle.net/DoubleYo/4Vz63/1648/

Он отлично работает с Firefox, но не с Chrome

.elem{
    position: absolute;
    top: 40px;
    left: 40px;
    width: 0; 
    height: 0;
    border-style: solid;
    border-width: 75px;
    border-color: red blue green orange;
    transition-property: transform;
    transition-duration: 1s;
}
.elem:hover {
    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

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

<div class="elem"></div>

Ответ 2

Здесь простое рабочее решение:

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.elem:hover {
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}

Ответ 3

Потребовалось несколько попыток, но я смог заставить ваш jsFiddle работать (только для Webkit).

По-прежнему возникает проблема с скоростью анимации, когда пользователь повторно вводит div.

В принципе, просто установите текущее значение вращения для переменной, затем выполните некоторые вычисления на этом значении (чтобы преобразовать в градусы), затем установите это значение обратно в элемент перемещения мыши и мыши.

Проверьте jsFiddle: http://jsfiddle.net/4Vz63/46/

Ознакомьтесь с этой статьей для получения дополнительной информации, в том числе о том, как добавить совместимость между браузерами: http://css-tricks.com/get-value-of-css-rotation-through-javascript/

Ответ 4

Вы должны заставить анимацию вернуться после завершения w/javascript.

  $(".item").live("animationend webkitAnimationEnd", function(){
    $(this).removeClass('animate');
  });

Ответ 5

Вот реализация javascript, которая работает с веб-комплектом:

var isHovering = false;

var el = $(".elem").mouseover(function(){
    isHovering = true;
    spin();
}).mouseout(function(){
    isHovering = false;
});

var spin = function(){
    if(isHovering){
        el.removeClass("spin");

        setTimeout(function(){
            el.addClass("spin");

            setTimeout(spin, 1500);
        }, 0);
    }
};
spin();

JSFiddle: http://jsfiddle.net/4Vz63/161/

Barf.

Ответ 6

<script>
var deg = 0

function rotate(id)
{
    deg = deg+45;
    var txt = 'rotate('+deg+'deg)';
    $('#'+id).css('-webkit-transform',txt);
}
</script>

То, что я делаю, очень просто... объявить глобальную переменную в начале... и затем увеличивать переменную, насколько мне нравится, и использовать .css jquery для увеличения.