Надеюсь, это сработает
function clockwise(){
var gears = document.querySelector(".gears"),
className = "clockwiseanimation";
if (gears.classList) {
gears.classList.remove("anticlockwiseanimation");
gears.classList.add(className);
}
else {
gears.className += " " + className;
}
}
function anticlockwise(){
var gears = document.querySelector(".gears"),
className = "anticlockwiseanimation";
if (gears.classList) {
gears.classList.remove("clockwiseanimation");
gears.classList.add(className);
}
else {
gears.className += " " + className;
}
}
.gears {
display: flex;
justify-content: center;
align-items: center;
width: 650px;
height: 450px;
background: #fff;
padding: 50px;
border-radius: 10px;
}
.gears.clockwiseanimation .gear-0 {
animation: rotation-0 10s linear infinite;
}
.gears.anticlockwiseanimation .gear-0 {
animation: rotation-1 10s linear infinite;
}
.gear-0 {
width: 250px;
transform: rotate(11.9deg);
}
@keyframes rotation-0 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotation-1 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<button onClick="clockwise()">clockwise</button>
<button onClick="anticlockwise()">anticlockwise</button>
<div class="box">
<div class="gears">
<div class="gear">
<svg version="1.2" class="gear-0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="-125 -125 250 250" xml:space="preserve">
<polygon id="gearpoly0" data-id="0" class="gear" fill="#02baff" stroke="#0175A0" stroke-width="2" stroke-miterlimit="10" points="71.25,0 93.9836,-0.0002 94.1444,-0.0071 94.4831,-0.0359 94.9976,-0.102 95.6851,-0.2208 96.5416,-0.4075 97.5621,-0.6768 98.7407,-1.0435 100.0706,-1.5216 101.5439,-2.1251 103.152,-2.8671 104.8852,-3.7605 106.7331,-4.8174 108.6844,-6.0494 110.7271,-7.4673 112.8484,-9.0812 115.0349,-10.9005 117.2723,-12.9337 119.5459,-15.1885 121.8405,-17.6717 123.3474,-20.2589 121.0817,-31.052 118.6616,-32.8149 115.5622,-34.1658 112.5738,-35.3159 109.7076,-36.2778 106.9742,-37.0643 104.3829,-37.6889 101.9425,-38.1657 99.6605,-38.509 97.5436,-38.7336 95.5974,-38.8546 93.8267,-38.8874 92.2351,-38.8474 90.8252,-38.7505 89.5986,-38.6122 88.556,-38.4485 87.6968,-38.2749 87.0195,-38.1072 86.5218,-37.9609 86.2002,-37.851 86.0501,-37.7927 65.2355,-28.6512 50.3814,-50.3814 66.4563,-66.4565 66.5651,-66.5752 66.7842,-66.835 67.1013,-67.2456 67.5034,-67.8158 67.9771,-68.5533 68.5082,-69.4654 69.0824,-70.5581 69.6846,-71.8366 70.2997,-73.3051 70.9121,-74.9668 71.5059,-76.8241 72.0653,-78.8781 72.5739,-81.129 73.0157,-83.576 73.3745,-86.2172 73.6342,-89.0497 73.7786,-92.0695 73.7919,-95.2716 73.6585,-98.65 72.8945,-101.545 63.6606,-107.5747 60.7028,-107.1101 57.556,-105.8737 54.6295,-104.5738 51.9227,-103.2273 49.4338,-101.8506 47.1598,-100.46 45.097,-99.0715 43.2406,-97.7006 41.5849,-96.3625 40.1232,-95.072 38.848,-93.8431 37.7508,-92.6894 36.8224,-91.6239 36.0528,-90.6588 35.4314,-89.8057 34.9465,-89.0754 34.5862,-88.478 34.3378,-88.0226 34.188,-87.7175 34.1231,-87.5701 25.869,-66.3879 0,-71.25 -0.0002,-93.9836 -0.0071,-94.1444 -0.0359,-94.4831 -0.102,-94.9976 -0.2208,-95.6851 -0.4075,-96.5416 -0.6768,-97.5621 -1.0435,-98.7407 -1.5216,-100.0706 -2.1251,-101.5439 -2.8671,-103.152 -3.7605,-104.8852 -4.8174,-106.7331 -6.0494,-108.6844 -7.4673,-110.7271 -9.0812,-112.8484 -10.9005,-115.0349 -12.9337,-117.2723 -15.1885,-119.5459 -17.6717,-121.8405 -20.2589,-123.3474 -31.052,-121.0817 -32.8149,-118.6616 -34.1658,-115.5622 -35.3159,-112.5738 -36.2778,-109.7076 -37.0643,-106.9742 -37.6889,-104.3829 -38.1657,-101.9425 -38.509,-99.6605 -38.7336,-97.5436 -38.8546,-95.5974 -38.8874,-93.8267 -38.8474,-92.2351 -38.7505,-90.8252 -38.6122,-89.5986 -38.4485,-88.556 -38.2749,-87.6968 -38.1072,-87.0195 -37.9609,-86.5218 -37.851,-86.2002 -37.7927,-86.0501 -28.6512,-65.2355 -50.3814,-50.3814 -66.4565,-66.4563 -66.5752,-66.5651 -66.835,-66.7842 -67.2456,-67.1013 -67.8158,-67.5034 -68.5533,-67.9771 -69.4654,-68.5082 -70.5581,-69.0824 -71.8366,-69.6846 -73.3051,-70.2997 -74.9668,-70.9121 -76.8241,-71.5059 -78.8781,-72.0653 -81.129,-72.5739 -83.576,-73.0157 -86.2172,-73.3745 -89.0497,-73.6342 -92.0695,-73.7786 -95.2716,-73.7919 -98.65,-73.6585 -101.545,-72.8945 -107.5747,-63.6606 -107.1101,-60.7028 -105.8737,-57.556 -104.5738,-54.6295 -103.2273,-51.9227 -101.8506,-49.4338 -100.46,-47.1598 -99.0715,-45.097 -97.7006,-43.2406 -96.3625,-41.5849 -95.072,-40.1232 -93.8431,-38.848 -92.6894,-37.7508 -91.6239,-36.8224 -90.6588,-36.0528 -89.8057,-35.4314 -89.0754,-34.9465 -88.478,-34.5862 -88.0226,-34.3378 -87.7175,-34.188 -87.5701,-34.1231 -66.3879,-25.869 -71.25,0 -93.9836,0.0002 -94.1444,0.0071 -94.4831,0.0359 -94.9976,0.102 -95.6851,0.2208 -96.5416,0.4075 -97.5621,0.6768 -98.7407,1.0435 -100.0706,1.5216 -101.5439,2.1251 -103.152,2.8671 -104.8852,3.7605 -106.7331,4.8174 -108.6844,6.0494 -110.7271,7.4673 -112.8484,9.0812 -115.0349,10.9005 -117.2723,12.9337 -119.5459,15.1885 -121.8405,17.6717 -123.3474,20.2589 -121.0817,31.052 -118.6616,32.8149 -115.5622,34.1658 -112.5738,35.3159 -109.7076,36.2778 -106.9742,37.0643 -104.3829,37.6889 -101.9425,38.1657 -99.6605,38.509 -97.5436,38.7336 -95.5974,38.8546 -93.8267,38.8874 -92.2351,38.8474 -90.8252,38.7505 -89.5986,38.6122 -88.556,38.4485 -87.6968,38.2749 -87.0195,38.1072 -86.5218,37.9609 -86.2002,37.851 -86.0501,37.7927 -65.2355,28.6512 -50.3814,50.3814 -66.4563,66.4565 -66.5651,66.5752 -66.7842,66.835 -67.1013,67.2456 -67.5034,67.8158 -67.9771,68.5533 -68.5082,69.4654 -69.0824,70.5581 -69.6846,71.8366 -70.2997,73.3051 -70.9121,74.9668 -71.5059,76.8241 -72.0653,78.8781 -72.5739,81.129 -73.0157,83.576 -73.3745,86.2172 -73.6342,89.0497 -73.7786,92.0695 -73.7919,95.2716 -73.6585,98.65 -72.8945,101.545 -63.6606,107.5747 -60.7028,107.1101 -57.556,105.8737 -54.6295,104.5738 -51.9227,103.2273 -49.4338,101.8506 -47.1598,100.46 -45.097,99.0715 -43.2406,97.7006 -41.5849,96.3625 -40.1232,95.072 -38.848,93.8431 -37.7508,92.6894 -36.8224,91.6239 -36.0528,90.6588 -35.4314,89.8057 -34.9465,89.0754 -34.5862,88.478 -34.3378,88.0226 -34.188,87.7175 -34.1231,87.5701 -25.869,66.3879 0,71.25 0.0002,93.9836 0.0071,94.1444 0.0359,94.4831 0.102,94.9976 0.2208,95.6851 0.4075,96.5416 0.6768,97.5621 1.0435,98.7407 1.5216,100.0706 2.1251,101.5439 2.8671,103.152 3.7605,104.8852 4.8174,106.7331 6.0494,108.6844 7.4673,110.7271 9.0812,112.8484 10.9005,115.0349 12.9337,117.2723 15.1885,119.5459 17.6717,121.8405 20.2589,123.3474 31.052,121.0817 32.8149,118.6616 34.1658,115.5622 35.3159,112.5738 36.2778,109.7076 37.0643,106.9742 37.6889,104.3829 38.1657,101.9425 38.509,99.6605 38.7336,97.5436 38.8546,95.5974 38.8874,93.8267 38.8474,92.2351 38.7505,90.8252 38.6122,89.5986 38.4485,88.556 38.2749,87.6968 38.1072,87.0195 37.9609,86.5218 37.851,86.2002 37.7927,86.0501 28.6512,65.2355 50.3814,50.3814 66.4565,66.4563 66.5752,66.5651 66.835,66.7842 67.2456,67.1013 67.8158,67.5034 68.5533,67.9771 69.4654,68.5082 70.5581,69.0824 71.8366,69.6846 73.3051,70.2997 74.9668,70.9121 76.8241,71.5059 78.8781,72.0653 81.129,72.5739 83.576,73.0157 86.2172,73.3745 89.0497,73.6342 92.0695,73.7786 95.2716,73.7919 98.65,73.6585 101.545,72.8945 107.5747,63.6606 107.1101,60.7028 105.8737,57.556 104.5738,54.6295 103.2273,51.9227 101.8506,49.4338 100.46,47.1598 99.0715,45.097 97.7006,43.2406 96.3625,41.5849 95.072,40.1232 93.8431,38.848 92.6894,37.7508 91.6239,36.8224 90.6588,36.0528 89.8057,35.4314 89.0754,34.9465 88.478,34.5862 88.0226,34.3378 87.7175,34.188 87.5701,34.1231 66.3879,25.869 "></polygon>
<g class="guides">
<polyline fill="none" stroke="#0175A0" stroke-width="2" stroke-miterlimit="10" points="10,0 -10,0"></polyline>
<polyline fill="none" stroke="#0175A0" stroke-width="2" stroke-miterlimit="10" points="0,10 0,-10"></polyline>
</g>
</svg>
</div>
</div>
</div>