left-and-right Animation

<style>
  @keyframes leftAndRightAnimation {
    0% {
      transform: none;
    }
    25% {
      transform: translateX(20px);
    }
    50% {
      transform: translateX(0px);
    }
    75% {
      transform: translateX(-20px);
    }
    100% {
      transform: translateX(0px);
    }
  }
</style>
<script>
  const element = document.querySelector("선택자");
  element.style = "color:#F5F5F5;font-size:20px;font-weight:900;background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);border-radius:50%";

  function leftAndRight() {
    element.style.animation = "leftAndRightAnimation 2s linear infinite";
  }
  leftAndRight();
</script>

좌우로 움직이는 애니메이션

• CSS를 사용하지 않고 JS로만 구현
• @keyframes은 <style>태그로 처리