要实现按下按钮后动画不会重复的效果，可以使用CSS的animation-play-state属性来控制动画的播放状态。当按钮被按下时，可以将animation-play-state属性设置为paused，以暂停动画的播放。当按钮再次被按下时，可以将animation-play-state属性设置为running，以恢复动画的播放。

以下是一个使用JavaScript和CSS实现的示例：

HTML代码：

按下按钮
动画效果

CSS代码：

@keyframes myAnimation {
  0% {transform: scale(1);}
  100% {transform: scale(2);}
}

#myAnimation {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myAnimation 2s infinite;
}

JavaScript代码：

var button = document.getElementById("myButton");
var animation = document.getElementById("myAnimation");

button.addEventListener("click", function() {
  if (animation.style.animationPlayState === "paused") {
    animation.style.animationPlayState = "running";
  } else {
    animation.style.animationPlayState = "paused";
  }
});

在上面的示例中，点击按钮会切换动画的播放状态。当动画的animation-play-state属性值为paused时，动画将暂停播放；当属性值为running时，动画将恢复播放。