JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target">
 <p>Hi!</p>
</div>

CSS

#target {
  background-color: black;
  color: white;
  display: table-cell;
  height: 100px;
  vertical-align: middle;
  width: 100px;
}

#target > p {
  text-align: center;
}

.shake1 {
  animation: shake1 0.1s;
}

@keyframes shake1 {
  0%   { transform: translate(2px,  0px) rotate(0deg); }
  50%  { transform: translate(-4px, 0px) rotate(5deg); }
  100% { transform: translate(2px,  0px) rotate(0deg); }
}

JavaScript

/**
 * DOM要素を定期的にアニメーションする。
 * @param {object} elm - DOM element
 * @param {string} className - CSS class name
 * @param {number} span - 何秒おきに動くか
 */
const addPeriodicMoving = (elm, className, span) => {
  let cnt = 0;
  const loop = () => {
    if (cnt % parseInt(span*30) === 0) {
      elm.classList.toggle(className);
    }
    cnt++;
    window.requestAnimationFrame(loop);
  };
  window.requestAnimationFrame(loop);
};

addPeriodicMoving(
  document.querySelector('#target'),
  'shake1',
  3
);