在颤动中创建播放暂停按钮的正确方法是什么

<button id="playPauseBtn"></button>

#playPauseBtn {
  width: 50px;
  height: 50px;
  border: none;
  background-color: transparent;
  background-image: url('play.png'); /* 播放图标 */
  background-repeat: no-repeat;
  background-position: center;
  animation: shake 1s infinite; /* 颤动动画 */
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(20deg); }
  40% { transform: rotate(-20deg); }
  60% { transform: rotate(15deg); }
  80% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}

var btn = document.getElementById('playPauseBtn');
var isPlaying = false;

btn.addEventListener('click', function() {
  isPlaying = !isPlaying;
  
  if (isPlaying) {
    btn.style.backgroundImage = "url('pause.png')"; // 暂停图标
    btn.style.animationPlayState = 'paused'; // 停止颤动动画
  } else {
    btn.style.backgroundImage = "url('play.png')"; // 播放图标
    btn.style.animationPlayState = 'running'; // 开始颤动动画
  }
});