JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<div class="gear gearRight">
rotate right
</div>
<div class="gear gearLeft">
rotate left
</div>
CSS
.gear {
width: 100px;
height: 100px;
position: absolute;
background: red;
}
.gearRight {
top: 100px;
left: 100px;
}
.gearLeft {
top: 300px;
left: 100px;
}
JavaScript
$('.gearRight').velocity({ rotateZ: "+=360" }, { duration: 5000, easing: "linear", loop: true});
loopMeLeft();
function loopMeLeft () {
$('.gearLeft').velocity({ rotateZ: "-=360" }, { duration: 5000, easing: "linear", complete: loopMeLeft});
}