When viewed on Safari, the spinning animation appears off-center. How can this issue be resolved?
The CSS code responsible for the animation is as follows:
html, body {
height: 100%;
}
body {
background: #a6b8b1;
display: grid;
place-content: center;
grid-gap: 2rem;
}
.link {
width: 10rem;
height: 10rem;
display: inline-block;
font: 300 1.55rem/1.4 "Josefin Sans";
text-transform: uppercase;
letter-spacing: 0.1175em;
word-spacing: 0.3em;
text-decoration: none;
}
.link__svg {
width: 100%;
height: auto;
transform-box: fill-box;
fill: #2b3338;
stroke: #2b3338;
stroke-width: 0.05em;
stroke-linecap: round;
stroke-linejoin: round;
}
.link__cloud {
transform-origin: 50% 50%;
animation: rotate normal infinite 60s linear;
fill: rgba(255, 255, 255, 0.15);
}
.link__face, .link__arrow {
transform-origin: 50% 50%;
transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0);
}
.link:hover .link__face, .link:hover .link__arrow {
transform: scale(1.1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.link__arrow {
stroke-width: 0.075em;
}
.link__text {
animation: rotateReverse normal infinite 20s linear;
transform-origin: 50% 50%;
}
.link:hover .link__text {
animation-play-state: paused;
}
.link--alt {
font-size: 1.15rem;
letter-spacing: 0;
word-spacing: 0;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes rotateReverse {
to {
transform: rotate(-360deg);
}
}
To see the complete HTML setup and SVG elements for the rotating link animation, visit the original source at: https://codepen.io/natszafraniec/pen/eYMPEaM