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

Question

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

@-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 градусам.Я бы хотел вернуться к этой позиции, но у меня возникли некоторые проблемы при разработке синтаксиса.

Любой ввод будет потрясающим!

Answer 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>

Answer 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;
}

Answer 3

JS-решение, совместимое с различными браузерами:

var e = document.getElementById('elem');
var spin = false;

var spinner = function(){
e.classList.toggle('running', spin);
if (spin) setTimeout(spinner, 2000);
}

e.onmouseover = function(){
spin = true;
spinner();
};

e.onmouseout = function(){
spin = false;
};

body { 
height:300px; 
}
#elem {
position:absolute;
top:20%;
left:20%;
width:0; 
height:0;
border-style: solid;
border-width: 75px;
border-color: red blue green orange;
border-radius: 75px;
}

#elem.running {
animation: spin 2s linear 0s infinite;
}

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

<div id="elem"></div>

Answer 4

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

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

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

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

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

Answer 5

<script>
var deg = 0

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

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

Answer 6

Вот реализация 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.

Answer 7

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

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