您有很多不必要的关键帧。不要将关键帧视为单独的帧，而应将它们视为动画中的“步骤”，并且计算机会填充关键帧之间的帧。
这是一个清理大量代码并使动画从中心开始的解决方案：
.gps_ring { border: 3px solid #999; -webkit-border-radius: 30px; height: 18px; width: 18px; position: absolute; left:20px; top:214px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0}@-webkit-keyframes pulsate { 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 50% {opacity: 1.0;} 100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}}
