So I am working on a SVG animation of a simple stopwatch using CSS transform: rotate() and it works perfectly on webkit browsers like chrome, and safari. However on Firefox it behaves quite differently where the second hand which I am trying to animate flies off it's axis. I created a codepen of it here.
#stopwatch {
position: relative;
}
.stopwatch-st0{fill:#E65E39;}
.stopwatch-st1{fill-rule:evenodd;clip-rule:evenodd;fill:#34312D;}
.stopwatch-st2{fill:#34312D;}
#stopwatch:hover #second-hand {
-webkit-animation: secondAnimate 1s ease;
animation: secondAnimate1 1s ease;
}
#second-hand {
--webkit-transform-origin: 12% 78%;
transform-origin: 12% 78%;
/*transform: rotate(-55deg);*/
-webkit-animation: secondAnimate 1s ease;
animation: secondAnimate 1s ease;
}
@-webkit-keyframes secondAnimate {
0% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes secondAnimate1 {
0% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}