css - CSS3 动画无法以不同的方式正常运行，具体取决于浏览器

Question

我遇到了一个问题，我的动画无法正常工作，但因浏览器而异。

在 Firefox 中，它可以正确缩放和淡入淡出，但不是来自正确的来源。在 Chrome 中，它会消失，但不会缩放。

我这辈子都想不通。

这是我的JSFiddle

这是我的 CSS

path {
    fill: white;
    stroke: black;
    stroke-width: 2;
}
.clone {
    -webkit-animation: lookAtMe 0.75s ease-out infinite;
    animation: lookAtMe 0.75s ease-out infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
@-webkit-keyframes lookAtMe {
    100% {
        -webkit-transform: scale(1.4, 1.4);
        opacity: 0;
    }
}
@keyframes lookAtMe {
    100% {
        transform: scale(1.4, 1.4);
        opacity: 0;
    }
}

有任何想法吗？