Javascript 在页面加载时从自动开始停止关键帧动画

我有一些css和关键帧动画，我用它们来运行几个Div元素。我希望css和关键帧动画仅在单击我的按钮时开始。我的问题是，他们自己开始，然后动画延迟已经用完，并使按钮无用

这是我正在尝试的代码

$document.readyfunction{ $bt1.clickfunction{ $.animation-box.addClassfirst-text、second-text、third-text、fourth-text、fifth-text； }; $'.animation box'.onanimationend webkitAnimationEnd oAnimationEnd MSAnimationEnd，函数{ $this.removeClass第一个文本、第二个文本、第三个文本、第四个文本、第五个文本； }; }; @关键帧topFadeOut{ 0% { 位置：绝对位置； 排名前10%； 不透明度：0； } 75% { 位置：绝对位置； 最高：50%； 不透明度：1； } 100% { 不透明度：0； } } @关键帧底部衰减{ 0% { 位置：绝对位置； 不透明度：0； } 75% { 位置：绝对位置； 不透明度：1； } 100% { 不透明度：0； } } @关键帧topFadeOutVertical{ 0% { 位置：绝对位置； 最高：60%； 不透明度：0； } 75% { 位置：绝对位置； 最高：65%； 不透明度：1； } 100% { 不透明度：0； } } @关键帧rightFadeInOut{ 0% { 位置：绝对位置； 右：-3rem； 不透明度：0； } 75% { 位置：绝对位置； 右：40%； 不透明度：1； } 100% { 不透明度：0； 右：10雷姆； } } @关键帧淡入淡出{ 0% { 不透明度：0； } 45% { 不透明度：1； } 100% { 不透明度：0%； } } .第一个文本{ 字体大小：4.4rem； 位置：绝对位置； 左：23%； 最高：70%； 不透明度：0； 动画名称：topFadeOut； 动画持续时间：5s； 颜色：黑色； 动画播放状态：i； } .第二个文本{ 字体大小：4.4rem； 位置：绝对位置； 最高：50%； 不透明度：0； 动画名称：rightFadeInOut； 动画延迟：4s； 动画持续时间：6s； 颜色：黑色； 动画播放状态：继承； } .第三文本{ 字体大小：4.4rem； 位置：绝对位置； 左：27%； 最高：50%； 不透明度：0； 动画名称：topFadeOutVertical； 动画延迟：8秒； 动画持续时间：6s； 颜色：黑色； 空白：nowrap； 动画播放状态：继承； } .第四文本{ 字体大小：4.4rem； 位置：绝对位置； 最高：55%； 左：27%； 不透明度：0； 颜色：黑色； 动画名称：fadeInOut； 动画延迟：12秒； 动画持续时间：7秒； 动画播放状态：继承； } .第五文本{ 字体大小：5rem； 位置：绝对位置； 左：30%； 最高：50%； 不透明度：0； 颜色：黑色； 动画名称：bottomFadeOut； 动画延迟：16秒； 动画持续时间：9秒； 动画播放状态：继承； } R70K 开始优胜者选择过程 确定符合条件的条目 上载符合条件的条目 洗牌符合条件的条目 获胜者是。。。 使用“动画播放状态”属性将动画设置为“最初暂停”

---

添加动画播放状态时：暂停；到my.first text{}等。他们的按钮单击然后不起作用。更改JS，使其更改动画播放状态，而不是添加这些类