Javascript 通过单击按钮启动CSS动画

我有一个CSS动画，当页面加载时开始。我希望它只在按下按钮时启动。我尝试了一些不同的方法，但似乎只针对第一个圆圈，而不是全部

HTML:

您可以：

.circle{
边界半径：50%；
背景：透明；
边框：10px纯白；
宽度：300px；
高度：300px；
保证金：0自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大宽度：100%；
}
#圆圈，动画，圆圈{
动画：变色4s无限；
}

您可以执行以下操作：

.circle{
边界半径：50%；
背景：透明；
边框：10px纯白；
宽度：300px；
高度：300px；
保证金：0自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大宽度：100%；
}
#圆圈，动画，圆圈{
动画：变色4s无限；
}

---

将事件侦听器添加到按钮，该按钮将带有动画的类应用于

元素。圈出
元素


document.getElementById（'button'）.addEventListener（'click'，function（）{
var c=document.getElementsByClassName（'circle'）；
对于（变量i=0；i

.circle{
边界半径：50%；
背景：透明；
边框：10px纯白；
宽度：300px；
高度：300px；
保证金：0自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大宽度：100%；
}
.圈h1{
利润率：5%！重要；
}
.c2{
宽度：250px；
高度：250px；
边框颜色：白色；
动画延迟：1s；
}
.c3{
宽度：200px；
高度：200px；
边框颜色：白色；
动画延迟：2s；
}
.c4{
宽度：150px；
高度：150像素；
动画延迟：3s；
}
.c4 h3{
文本对齐：居中；
字号：100；
填充：13%；
字体大小：24px；
颜色：#1c50a8；
}
.制作动画{
动画持续时间：4s；
动画名称：changeColor；
动画迭代次数：无限；
}
@关键帧改变颜色{
0% {
边框颜色：#1C50A8；
}
24% {
边框颜色：#1C50A8；
}
25% {
边框颜色：白色；
}
100% {
边框颜色：白色；
}
}

点击
呼出
将事件侦听器添加到按钮，该按钮将带有动画的类应用于
元素


document.getElementById（'button'）.addEventListener（'click'，function（）{
var c=document.getElementsByClassName（'circle'）；
对于（变量i=0；i

.circle{
边界半径：50%；
背景：透明；
边框：10px纯白；
宽度：300px；
高度：300px；
保证金：0自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大宽度：100%；
}
.圈h1{
利润率：5%！重要；
}
.c2{
宽度：250px；
高度：250px；
边框颜色：白色；
动画延迟：1s；
}
.c3{
宽度：200px；
高度：200px；
边框颜色：白色；
动画延迟：2s；
}
.c4{
宽度：150px；
高度：150像素；
动画延迟：3s；
}
.c4 h3{
文本对齐：居中；
字号：100；
填充：13%；
字体大小：24px；
颜色：#1c50a8；
}
.制作动画{
动画持续时间：4s；
动画名称：changeColor；
动画迭代次数：无限；
}
@关键帧改变颜色{
0% {
边框颜色：#1C50A8；
}
24% {
边框颜色：#1C50A8；
}
25% {
边框颜色：白色；
}
100% {
边框颜色：白色；
}
}

点击
呼出
从
html
，
中的元素中删除
圈
.className
，
添加（）
圈
.className
到
.classList
是
圈
的子元素，其中
.className
以
c>开头
at单击
元素


window.onload=function（）{
document.querySelector（“按钮”）.onclick=function（）{
this.onclick=null；
document.queryselectoral（“#圆[class^=c]”）
.forEach（函数（圆）{
circle.classList.add（“circle”）
})
}
}
.circle{
边界半径：50%；
背景：透明；
边框：10px纯白；
宽度：300px；
高度：300px；
保证金：0自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大宽度：100%；
动画持续时间：4s；
动画名称：changeColor；
动画迭代次数：无限；
}
.圈h1{
利润率：5%！重要；
}
.c2{
宽度：250px；
高度：250px；
边框颜色：白色；
动画延迟：1s；
}
.c3{
宽度：200px；
高度：200px；
边框颜色：白色；
动画延迟：2s；
}
.c4{
宽度：150px；
高度：150像素；
动画延迟：3s；
}
.c4 h3{
文本对齐：居中；
字号：100；
填充：13%；
字体大小：24px；
颜色：#1c50a8；
}
@关键帧改变颜色{
0% {
边框颜色：#1C50A8；
}
24% {
边框颜色：#1C50A8；
}
25% {
边框颜色：白色；
}
100% {
边框颜色：白色；
}
}

点击
呼出
从
html
，
中的元素中删除
圈
.className
，
添加（）
圈
.className
到
.classList
是
圈
的子元素，其中
.className
以
c>开头
at单击
元素


window.onload=function（）{
document.querySelector（“按钮”）.onclick=function（）{
this.onclick=null；
document.queryselectoral（“#圆[class^=c]”）
.forEach（函数（圆）{
circle.classList.add（“circle”）
})
}
}
.circle{
边界半径：50%；
背景：透明；
边框：10px纯白；
宽度：300px；
高度：300px；
保证金：0自动；
显示：
<div id="circles">
  <div class="circle c1">
    <div class="circle c2">
      <div class="circle c3">
          <div class="circle c4"><h3>Breathe Out</h3></div>
      </div>
    </div>
  </div>

</div>

.circle {
  border-radius: 50%;
  background: transparent;
  border: 10px solid white;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  animation-duration: 4s;
  animation-name: changeColor;
  animation-iteration-count: infinite;
}

.circle h1 {
    margin:5% !important;
}

.c2 {
  width: 250px;
  height: 250px;
  border-color: white;
    animation-delay:1s;
}

.c3 {
  width: 200px;
  height: 200px;
  border-color: white;
    animation-delay:2s;
}

.c4 {
  width: 150px;
  height: 150px;
    animation-delay:3s;
}

.c4 h3 {
    text-align: center;
    font-weight: 100;
    padding:13%;
    font-size:24px;
    color:#1c50a8;
}

@keyframes changeColor {
  0% {
    border-color: #1C50A8;
  }
  24% {
    border-color: #1C50A8;
  }
  25% {
    border-color: white;
  }
  100% {
    border-color: white;
  }
}