웹 앱이나 웹사이트에서 요소들을 부드럽게 페이드 인하거나 페이드 아웃하는 효과를 만들 수 있습니다. 이를 위해 자바스크립트로 애니메이션 시간과 속도를 조절할 수 있습니다.

이 포스트에서는 자바스크립트를 사용하여 페이드 인/아웃 애니메이션의 시간과 속도를 조절하는 방법에 대해 다루겠습니다.

1. 요소에 애니메이션 클래스 추가하기

const element = document.getElementById('myElement');
element.classList.add('fade-in');

2. CSS로 애니메이션 설정하기

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

위의 CSS 코드에서 @keyframes는 애니메이션을 정의하고, .fade-in 클래스는 요소에 애니메이션을 적용합니다. 0.5s는 애니메이션 지속 시간을 나타내며 ease-in은 애니메이션 속도를 조절합니다.

애니메이션 속도에는 ease, linear, ease-in, ease-out, ease-in-out 등의 옵션이 있으며, 시간에는 s(초)나 ms (밀리초) 단위를 사용할 수 있습니다.

3. 애니메이션 시간 및 속도 조절하기

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

위의 CSS 코드에서 1s는 애니메이션 지속 시간을 1초로 설정하며, ease-in-out은 애니메이션 속도를 조절합니다.

이제 자바스크립트를 사용하여 요소에 대한 페이드 인/아웃 애니메이션의 시간과 속도를 조절할 수 있게 되었습니다.

자세한 내용은 MDN Web Docs를 참고할 수 있습니다.