JSFiddle - React, Tailwind, and code Playground

HTML

<h1>CSS Typed OM</h1>
<div class="transformElement"></div>

CSS

.transformElement{
  margin:5em auto;
  background-color: red;
  min-height: 84px;
  width: 84px;
}

h1{
   text-align: center;
}

JavaScript

let rafId;
	let angle; 
	let elem = document.getElementsByClassName('transformElement')[0];
	
  const rotate = new CSSRotate(0, 0, 1, CSS.deg(0));
	const transform = new CSSTransformValue([rotate]);
	
  elem.attributeStyleMap.set('transform', transform);
  
  function draw(){
    rafId = requestAnimationFrame(draw);
    
		transform[0].angle.value = (transform[0].angle.value +5) % 360;
   
    elem.attributeStyleMap.set('transform', transform);
  }

	elem.addEventListener('mouseenter', ()=>{
		draw();
	})

	elem.addEventListener('mouseleave', () =>{
		cancelAnimationFrame(rafId);
	})