不使用animation组件的方法

如果您不想使用`animation`组件，可以使用CSS中的`animation`属性来创建自定义动画。要暂停这些动画，可以使用JavaScript中的`animation-play-state`属性。

例如，您可以在CSS中定义一个简单的动画：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myAnimation 2s infinite;
}

@keyframes myAnimation {
  0%   { left: 0px; }
  50%  { left: 200px; }
  100% { left: 0px; }
}

然后，在您的JavaScript代码中，您可以使用以下代码来暂停动画：

var box = document.querySelector('.box');
box.style.animationPlayState = 'paused';

这将暂停所有元素中名为“myAnimation”的动画。要重新启动动画，可以使用以下代码：

box.style.animationPlayState = 'running';

请注意，在使用`animation-play-state`属性后，您仍然可以使用`animation-delay`，`animation-duration`和`animation-timing-function`属性来更改动画的不同方面。