单击按钮启动CSS动画

Question

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

HTML：

<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>

CSS：

.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;
  }
}

JSFIDDLE

Answer 1

向按钮添加事件侦听器，该按钮将带动画的类应用于.circle元素。

document.getElementById('button').addEventListener('click',function() {
  var c = document.getElementsByClassName('circle');
  for (var i = 0; i < c.length; i++) {
  	c[i].classList.add('animate');
  }
})

.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%;
}

.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;
}

.animate {
  animation-duration: 4s;
  animation-name: changeColor;
  animation-iteration-count: infinite;
}

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

<button id="button">
  click
</button>
<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>

Answer 2

从circle，.className html .add()到"circle"个子元素中的元素中删除.className .classList单击#circles元素时.className和"c"以<button>开头的位置

window.onload = function() {
  document.querySelector("button").onclick = function() {
    this.onclick = null;
    document.querySelectorAll("#circles [class^=c]")
    .forEach(function(circle) {
      circle.classList.add("circle")
    })
  }
}

.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;
  }
}

<button>
click
</button>
<div id="circles">
  <div class="c1">
    <div class="c2">
      <div class="c3">
        <div class="c4">
          <h3>Breathe Out</h3>
        </div>
      </div>
    </div>
  </div>

</div>

Answer 3

＆＃13;

＆＃13;

$(function(){
  $("#activate").click(function(){  	
    $(".circle").each(function(index){
    	$(this).css("animation-duration", "4s");    
    });
  })
})

＆＃13;

.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;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

<button id="activate">Animation</button>

＆＃13;

＆＃13;

＆＃13;

您可以将animation-duration CSS分开并将其放在按钮中。 https://jsfiddle.net/5rgLx9y0/

$(function(){
  $("#activate").click(function(){      
    $(".circle").each(function(index){
        $(this).css("animation-duration", "4s");    
    });
  })
})

Answer 4

你可以这样做：

if (p.u.equals(p.udc)) ...

.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%;
}

#circles.anim .circle {
  animation: changeColor 4s infinite;
}

这实质上是这样做的，当单击按钮时，您的父dev <button onclick="document.querySelector('#circles').classList.add('anim')">元素将获得#circles类。

这将在每个子.anim元素上启用动画。导致点击动画开始播放