CSS关键帧，Safari无法返回第一个关键帧

Question

我正在使用CSS动画向SVG <g>元素添加“摆动”效果。所需的效果是使每个元素在悬停时“摆动”，然后返回到其原始位置。这在Chrome浏览器中效果很好，但是在Safari中，<g>的位置在结束悬停时会保留下来，因此定位很奇怪。我希望每个字母都恢复到原始状态。我已经探索过animation-fill-mode，但是似乎没有任何价值？

SCSS

// Logo
.logo {
    position: fixed;
    top: 50%;
    left: 50%;
  transform: translate(-50%,-50%);
    z-index: 1;
    width: 260px;
    display: block;

    // SVG
    svg {
        display: block;
        width: 100%;
        overflow: visible;

        g {
            fill: transparent;
            transition: all 300ms ease-in-out;

            @keyframes wobble {
              0% { transform: rotate(0) translate3d(0, 0, 0) }
              25% { transform: rotate(2deg) translate3d(1px, 0, 0) }
              50% { transform: rotate(-1deg) translate3d(0, -1px, 0) }
              75% { transform: rotate(1deg) translate3d(-1px, 0, 0) }
              100% { transform: rotate(-2deg) translate3d(-1px, -1px, 0) }
            }

            animation-duration: 400ms;
            animation-iteration-count: infinite;
            animation-fill-mode: none;
            animation-name: wobble;
            animation-timing-function: ease-in-out;

            path {
                fill: red;
            }
        }
  }
}

Example