좌우로 왔다갔다 하는 CSS 애니메이션

1. CSS 애니메이션 만들기

 

CSS에서 기본 애니메이션을 만들려면 @keyframes 규칙을 사용하여 애니메이션을 정의한 다음 

animation 속성을 사용하여 요소에 적용합니다.

 

다음은 box 요소를 왼쪽에서 오른쪽으로 이동시키는 간단한 애니메이션의 예입니다.

    /* 애니메이션 정의하기 */
    @keyframes move-right {
      0% { left: 0; }
      100% { left: calc(100% - 50px); }
    }
    @keyframes move-left {
      0% { left: calc(100% - 50px); }
      100% { left: 0; }
    }

    /* 애니메이션 적용하기 */
    .box {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      animation: move-right 2s ease-in-out infinite;
    }

 

이 애니메이션은 요소를 왼쪽에서 오른쪽으로 이동하고 다시 2초 후에 뒤로 이동하며 무한 반복됩니다.

 

2. 가장자리에 부딪혔을 때 반대 방향으로 이동하기

위의 애니메이션은 한쪽 방향(여기에서는 right)으로만 계속해서 이동합니다.

여기에서 자바스크립트를 이용하면, .box 요소가 한쪽 방향으로 이동하다가 컨테이너의 한쪽 끝에 다다랐을 때 방향을 바꿔 반대 방향으로 이동하도록 할 수 있습니다. 

 

1) 자바스크립트를 사용하여 컨테이너를 기준으로 요소의 위치를 확인합니다. 

function moveElement() {
  // .box 요소의 현재 위치 알아내기
  const currentPosition = parseInt(window.getComputedStyle(element).getPropertyValue('left'));
}

 

2)  if/else 문을 사용하여 요소가 컨테이너의 왼쪽 또는 오른쪽 가장자리에 도달했는지 확인한 후  요소가 컨테이너의 왼쪽 또는 오른쪽 가장자리에 도달하면 애니메이션의 방향이 반대가 되는 소스를 추가합니다. 

	 	
// .box가 컨테이너의 왼쪽이나 오른쪽 가장자리에 닿았는지 체크하기
  if (currentPosition <= 0) {
    element.style.animation = "move-right 2s ease-in-out infinite";
    direction = 1;
  } else if (currentPosition + elementWidth >= containerWidth) {
    element.style.animation = "move-left 2s ease-in-out infinite";
    direction = -1;
  }
  
// 반대 방향으로 이동
element.style.left = currentPosition + direction + 'px';

 

3) 이 애니메이션이 계속해서 일어날 수 있도록 setTimeout() 함수를 사용해서 moveElement() 함수를 반복 실행합니다.

    // moveElement() 다시 실행
    setTimeout(moveElement, 10);

 

 

See the Pen forth-and-back by do.it.html5 (@kyrieko) on CodePen.