javascript - Can I add a button to start and stop the transition by using JS or CSS? -

is possible add button control(start/stop) transition? html code:

https://jsfiddle.net/jxgskgp6/

@keyframes roundandround {    {      transform: rotatex(360deg) rotatey(360deg);    }  }    @keyframes show {    {      opacity: 1;    }  }    body {    background-color: #000000;  }    .scene {    width: 600px;    height: 600px;    margin: 2% auto;    perspective: 1000px;  }    .wrapper {    width: 100%;    height: 100%;    transform: rotatex(45deg) rotatey(45deg);    transform-style: preserve-3d;  }    .ball {    position: relative;    width: 70%;    height: 70%;    margin: 0 auto;    transform-style: preserve-3d;    animation: roundandround 7.5s 1.3s infinite linear;  }    .ball .ring {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    border: 6px;    border-style: dashed;    border-radius: 50%;    opacity: 0;    animation: show 0.75s forwards ease-in-out;  }    .ring:nth-child(1) {    color: #8df435;    transform: rotatey(4deg);    animation-delay: 0s;  }    .ring:nth-child(2) {    color: #a8e526;    transform: rotatey(8deg);    animation-delay: 0.1s;  }    .ring:nth-child(3) {    color: #c2d11c;    transform: rotatey(12deg);    animation-delay: 0.2s;  }    .ring:nth-child(4) {    color: #c8cb1b;    transform: rotatey(16deg);    animation-delay: 0.3s;  }    .ring:nth-child(5) {    color: #deb21a;    transform: rotatey(20deg);    animation-delay: 0.4s;  }    .ring:nth-child(6) {    color: #ef9621;    transform: rotatey(24deg);    animation-delay: 0.5s;  }    .ring:nth-child(7) {    color: #f29122;    transform: rotatey(28deg);    animation-delay: 0.6s;  }    .ring:nth-child(8) {    color: #fb7430;    transform: rotatey(32deg);    animation-delay: 0.7s;  }    .ring:nth-child(9) {    color: #fe5944;    transform: rotatey(36deg);    animation-delay: 0.8s;  }    .ring:nth-child(10) {    color: #fe5548;    transform: rotatey(40deg);    animation-delay: 0.9s;  }    .ring:nth-child(11) {    color: #f83d61;    transform: rotatey(44deg);    animation-delay: 1s;  }    .ring:nth-child(12) {    color: #ec2b7d;    transform: rotatey(48deg);    animation-delay: 1.1s;  }    .ring:nth-child(13) {    color: #e82983;    transform: rotatey(52deg);    animation-delay: 1s;  }    .ring:nth-child(14) {    color: #d41e9f;    transform: rotatey(56deg);    animation-delay: 0.9s;  }    .ring:nth-child(15) {    color: #bd1aba;    transform: rotatey(60deg);    animation-delay: 0.8s;  }    .ring:nth-child(16) {    color: #b81ac0;    transform: rotatey(64deg);    animation-delay: 0.7s;  }    .ring:nth-child(17) {    color: #9c1fd7;    transform: rotatey(68deg);    animation-delay: 0.6s;  }    .ring:nth-child(18) {    color: #802aea;    transform: rotatey(72deg);    animation-delay: 0.5s;  }    .ring:nth-child(19) {    color: #7a2dee;    transform: rotatey(76deg);    animation-delay: 0.4s;  }    .ring:nth-child(20) {    color: #5f40f9;    transform: rotatey(80deg);    animation-delay: 0.3s;  }    .ring:nth-child(21) {    color: #4657fe;    transform: rotatey(84deg);    animation-delay: 0.2s;  }    .ring:nth-child(22) {    color: #425cfe;    transform: rotatey(88deg);    animation-delay: 0.1s;  }    .ring:nth-child(23) {    color: #2f77fb;    transform: rotatey(92deg);    animation-delay: 0s;  }

<div class="scene">    <div class="wrapper">      <ul class="ball">        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>        <li class="ring"></li>      </ul>    </div>  </div>

you this, add css rule, button , script.

what adds/removes stop class ball element, toggles animations play state.

updated fiddle

html

<button>start/stop</button> 

css

.ball.stop {   animation-play-state: paused; } 

js

window.addeventlistener('load', function(){   var ball = document.queryselector('.ball');   var btn = document.queryselector('button');   btn.addeventlistener('click', function(e){     ball.classlist.toggle('stop');   }) })