Тут вот такое:
https://webref.ru:443/css/animation-play-state
Вариант: кнопка меняет класс у #field
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style type="text/css">
#field {
position: relative;
margin-top: 2%;
width: 1200px;
height: 500px;
margin: 2%;
border: 1px solid black;
}
.square {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
z-index: 2;
}
.Circle {
position: absolute;
top: 15%;
left: 15%;
width: 350px;
height: 350px;
background: none;
z-index: 1;
border: 1px solid black;
animation: none;
}
.ggg > div:nth-child(1) {top:0;
left:41%;}
.ggg > div:nth-child(2) {top:15%;
left:77%;}
.ggg > div:nth-child(3) {top:65%;
left:77%;}
.ggg > div:nth-child(4) {top:65%;
left:5%;}
.ggg > div:nth-child(5) {top:15%;
left:5%;}
.ggg {
position: relative;
width: 500px;
height: 500px;
transform-origin: center;
border: 1px solid black;
}
#field >.ggg{
animation: Circling 4s linear infinite;
animation-play-state: paused;
}
#field.El >.ggg{
animation-play-state: running;
}
@keyframes Circling {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)}
}
#field >.ggg> div {
animation: Circling 4s linear infinite reverse;
animation-play-state: paused;
}
#field.El >.ggg> div {
animation-play-state: running;
}
</style>
<body>
<div id="field" class="El">
<div class="ggg">
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling Circle"></div>
</div>
</div>
<button id="go" type="button" style="float:right">Cтоп/Пуск</button>
<script type="text/javascript">
$('#go').click(function () {
$('#field').toggleClass('El')
});
</script>
</body>
</html>