我遇到了一个问题,我的动画无法正常工作,但因浏览器而异。
在 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;
}
}
有任何想法吗?