자바스크립트로 요소를 페이드 인하거나 페이드 아웃하려면 CSS 키 프레임 애니메이션을 사용할 수 있습니다. 아래는 간단한 CSS 키 프레임 애니메이션 예제입니다.

CSS 키 프레임 애니메이션

다음은 요소를 페이드 인/아웃하는 데 사용할 수 있는 CSS 키 프레임 애니메이션입니다.

/* 페이드 인 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 페이드 아웃 애니메이션 */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

위의 코드는 fadeIn 및 fadeOut라는 두 가지 다른 키 프레임 애니메이션을 정의합니다. fadeIn은 투명도를 0에서 1로 증가시켜 요소를 페이드 인하고, fadeOut은 투명도를 1에서 0으로 감소시켜 요소를 페이드 아웃합니다.

자바스크립트에서 CSS 애니메이션 적용

이제 자바스크립트를 사용하여 요소에 페이드 인/아웃 애니메이션을 적용할 수 있습니다. 예를 들어, 요소에 fadeIn 및 fadeOut 키 프레임 애니메이션을 적용하는 방법은 다음과 같습니다.

// 요소에 fadeIn 애니메이션 적용
element.style.animation = "fadeIn 1s ease-in";

// 요소에 fadeOut 애니메이션 적용
element.style.animation = "fadeOut 1s ease-out";

위의 자바스크립트 코드는 요소에 fadeIn 또는 fadeOut 키 프레임 애니메이션을 1초 동안 적용하는 방법을 보여줍니다.

위의 CSS와 자바스크립트 코드를 조합하면 요소에 페이드 인/아웃 애니메이션을 쉽게 적용할 수 있습니다.

결론

CSS 키 프레임 애니메이션은 자바스크립트에서 요소의 페이드 인/아웃 효과를 쉽게 구현할 수 있는 강력한 도구입니다. 이를 활용하여 웹 애플리케이션 및 웹사이트에서 부드러운 애니메이션 효과를 만들어 낼 수 있습니다.

참고문헌:

• MDN web docs