Прежде всего, он работает на 100% нормально для меня на Chrome, но работает так же, как заголовок, описанный при работе с Firefox
Я пытаюсь сделать простую анимацию (используя переходы), чтобы работать бесконечно, когдапри наведении курсора мыши и на медленное возвращение в исходное положение при наведении мыши
Проблема заключается в том, что в Firefox он ведет себя не так, как требуется
. В соответствии с запросом приведен минимизированный и упрощенный код, который воспроизводит мою текущую проблему.:
var arcs = $("#logoSec");
var greenarc = $(".greenarc");
var garcMs = 2100; // In ms
var arcsAnimBool = false; // If false, stops the anim loop
greenarc.css({
transition: "transform " + (garcMs * 1) + "ms ease-in-out"
});
function greenArcNormal() {
if (!arcsAnimBool) return;
greenarc.css("transform", "rotate(70deg)");
setTimeout(greenArcRevert, garcMs); // Call the reverse rotation after garcMs ms
}
function greenArcRevert() {
if (!arcsAnimBool) return;
greenarc.css("transform", "rotate(-70deg)");
setTimeout(greenArcNormal, garcMs); // Call the normal rotation after garcMs ms
}
arcs.hover(
function() { // On mouseover
arcsAnimBool = true;
greenarc.css({
transition: "transform " + (garcMs * 1) + "ms ease-in-out"
});
greenArcNormal();
},
function() { // On mouseout
arcsAnimBool = false; // Set to false to stop the infinite loop of greenArcRevert/Normal
greenarc.css("transform", "rotate(0deg)"); // Revert arc back to initial position
greenarc.css({
transition: "transform " + (garcMs * 0.5) + "ms ease-in-out"
});
}
);
#ArcsLogo {
height: 550px;
}
#logoSec {
display: flex;
background-color: #fdfdfd;
}
<div id="logoSec">
<svg class="arcs" version="1.1" id="ArcsLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-12 30 383.4 407.5" style="enable-background:new 0 0 383.4 407.5;" xml:space="preserve">
<style type="text/css">
.greenarc {
fill: #00ff00;
transform-origin: 50% 50%;
}
.graycircle {
fill: #5d5d5d;
transform-origin: 50% 50%;
}
.redarc {
fill: #ff0000;
transform-origin: 50% 50%;
}
</style>
<path id="GreenArc" class="greenarc" d="M201.1,62.7c-3.2,0-6.3,0.1-9.4,0.3c77.7,5.5,136.2,72.9,130.7,150.6
c-4.9,70-60.7,125.8-130.7,130.7c3.1,0.2,6.3,0.4,9.4,0.4c77.9,0,141-63.1,141-141S279,62.7,201.1,62.7L201.1,62.7z" />
<circle id="GrayCircle" class="graycircle" cx="191.7" cy="203.7" r="21.2" />
<path id="RedArc" class="redarc" d="M60.2,203.7c0-84.6,65.9-154.6,150.4-159.6c-3.1-0.2-6.3-0.3-9.5-0.3
C112.8,43.2,40.7,114.2,40,202.5c-0.7,88.3,70.3,160.4,158.6,161.1c0.8,0,1.7,0,2.5,0c3.2,0,6.3-0.1,9.5-0.3
C126.2,358.3,60.2,288.3,60.2,203.7z" />
</svg>
</div>
(упрощенный код в jsfiddle) https://jsfiddle.net/Ferdam/htxcwanu/28/
(старый полный код: https://jsfiddle.net/Ferdam/9kz52e6h/3/)
У меня мало опыта работы с HTML / JS / JQuery / CSS, поэтому я могу упустить что-то простое, я не знаю.
Любая помощь приветствуется. Спасибо!
Редактировать:
Процитируем прямо то, что я ответил nivoli:
Я забыл упомянуть, что раньше пытался использовать ключевые кадры, но проблема в том, что я не мог заставить его работать так, как код, который я предоставил, потому чтовсякий раз, когда я перемещал элементы, просто «телепортировался» обратно в исходное положение, именно поэтому я начал использовать CSS-переходы. Я просто не мог найти способ анимировать элементы обратно в исходное положение, используя ключевые кадры