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

ProgramBox

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

Post author:admin
Запись опубликована:16 февраля, 2023
Post category:Вопросы по программированию

#css #css-animations

#css #css-анимации

Вопрос:

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

 @-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. Честно говоря, я не думаю, что вы сможете. Я все равно создал jsFiddle, так что, если у кого-нибудь есть идея … jsfiddle.net/4Vz63/1

2. Спасибо за jsfiddle — я сам в тупике, кажется, что это должно быть возможно с ключевыми кадрами, но я еще не очень хорошо знаком с синтаксисом CSS # animation.

3. Я думаю, что вы можете получить обратный эффект анимации только с помощью свойства -webkit-transition, а не с помощью -webkit-animation

4. Конечно, вы можете сделать это в JS, но не в чистом CSS. Также, пожалуйста, проверьте это решение, которое как бы близко к тому, что вы хотите — jsfiddle.net/SebastianPataneMasuelli/nkEwQ/7

Ответ №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>

1. Отличный помощник по скрипке (или fiffle ;))

2. Я полная задница, потому что почему-то не заметил этого ответа. Исправление в FF лучше, чем ничего, может быть исправлено с помощью JS для работы в Chrome.

3. Попробовал jFiddle, он отлично работал в Chrome, и я отключил анимацию в FF. Похоже, что если увеличить продолжительность анимации, то вращение работает хорошо. Что-то вроде -moz-animation-duration: 6s (ничего волшебного в 6s) 1,5 с слишком быстро для FF

4. Одна из моих любимых скрипок всех времен, я люблю менять border-style

5. Это не работает для меня в Chrome 35. Это работает (вроде) в FF 30. Если я наведу курсор мыши, оставлю, затем наведу курсор мыши, прежде чем он сбросится на 0, он завершит анимацию, а затем перейдет к запуску анимации бесконечного вращения.

Ответ №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:

Совместимое с браузером решение 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>

Ответ №4:

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

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

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

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

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

Ответ №5:

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

Рвота.

Ответ №6:

 <script>
var deg = 0

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

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

Ответ №7:

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

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