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;
    }
}

何か案は？