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

任何想法？