css动画原地自动放大缩小

您可以使用CSS3的@keyframes规则来实现一个元素的自动放大缩小的动画效果。具体实现方式如下：

首先需要定义一个CSS类，例如：

.animate {
  animation: zoom 3s ease-in-out infinite alternate;
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

然后在需要进行动画的元素上添加该类名，例如：

<div class="animate">我是一个元素</div>

这样，该元素将会自动在3秒内从原始大小缩放到1.5倍大小，再返回原始大小，如此反复进行，直到停止动画。

您可以通过调整@keyframes规则中的百分比来控制动画的速度和缩放程度。如果需要暂停动画，可以使用JavaScript来修改元素的animation-play-state属性值。例如：

var elem = document.querySelector('.animate');
elem.addEventListener('click', function() {
  if (elem.style.animationPlayState === 'paused') {
    elem.style.animationPlayState = 'running';
  } else {
    elem.style.animationPlayState = 'paused';
  }
});

这样，当用户点击该元素时，它将暂停或继续执行动画。