Непрерывное вращение CSS анимацию при наведении, анимация вернуться к 0deg на Ховер из

Question

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

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

876 7

css css3

7 ответов:

Comments

Ничего не найдено.

DoubleYo · Accepted Answer · 2016-05-24 10:33:00

решение: установить значение по умолчанию в вашем .Элем. Но это уничтожение отлично работает с -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>

luizfelippe · Accepted Answer · 2015-06-06 20:44:24

вот простое рабочее решение:

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

triq6 · Accepted Answer · 2011-12-29 01:23:07

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

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

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

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

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

fsw · Accepted Answer · 2018-04-28 16:15:57

Кросс-браузер совместимый 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>

bendytree · Accepted Answer · 2012-04-13 06:41:26

вот реализация javascript, которая работает с web-kit:

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/

блевать.

chovy · Accepted Answer · 2011-11-03 19:27:37

вы должны вызвать анимацию, чтобы вернуться, как только она будет завершена с javascript.
  $(".item").live("animationend webkitAnimationEnd", function(){
    $(this).removeClass('animate');
  });

omar-ali · Accepted Answer · 2013-02-13 10:27:19

<script>
var deg = 0

function rotate(id)
{
    deg = deg+45;
    var txt = 'rotate('+deg+'deg)';
    $('#'+id).css('-webkit-transform',txt);
}
</script>
то, что я делаю, это что-то очень простое... объявить глобальную переменную в начале... а затем увеличьте переменную, сколько мне нравится, и используйте .CSS и jQuery, чтобы прирастить.