CSS3 애니메이션 종료 상태를 변경하지 않고 유지하는 방법

소개

CSS3 애니메이션은 웹 디자인에 풍부한 동적 효과를 제공하여 페이지를 더욱 생생하고 매력적으로 만듭니다. 그러나 때로는 애니메이션이 종료될 때 초기 상태로 돌아가는 대신 최종 상태를 유지하기를 원할 수도 있습니다. 이 문서에서는 이 효과를 달성하고 작업이 끝날 때 애니메이션이 이 상태를 유지하도록 하는 여러 가지 방법을 소개합니다.

방법 1: animation-fill-mode 속성 사용

animation-fill-mode 속성은 재생 전후의 애니메이션 스타일을 제어하는 ​​데 사용됩니다. 이 속성을 설정하면 애니메이션이 종료될 때 최종 상태를 유지하는 효과를 얻을 수 있습니다.

속성 값

예

 .요소 {
  애니메이션: myAnimation 2s easy-in-out;
  애니메이션 채우기 모드: 앞으로;
}
@keyframes myAnimation {
  0% {
    변환: 번역X(0);
  }
  100% {
    변환: 번역X(100px);
  }
}

이 예에서 .element 요소는 애니메이션이 끝난 후에도 transform: translateX(100px) 상태로 유지됩니다.

방법 2: animationend 이벤트 사용

JavaScript를 통해 animationend 이벤트를 청취하면 애니메이션 종료 시 요소의 스타일을 수동으로 설정하여 애니메이션 종료 상태를 유지할 수 있습니다.

예

 <div 클래스="요소"></div>

 .요소 {
  너비: 100px;
  높이: 100px;
  배경색: 빨간색;
  애니메이션: myAnimation 2s easy-in-out;
}
@keyframes myAnimation {
  0% {
    변환: 번역X(0);
  }
  100% {
    변환: 번역X(100px);
  }
}

 const 요소 = document.querySelector('.element');
element.addEventListener('animationend', () => {
  element.style.transform = 'translateX(100px)';
});

이 예에서 애니메이션이 끝나면 JavaScript 코드는 요소의 transform 속성을 translateX(100px) 로 설정하여 애니메이션의 종료 상태를 유지합니다.

방법 3: transition 속성 사용

transition 속성은 주로 전환 효과에 사용되지만, 이를 현명하게 사용하면 애니메이션이 종료될 때 최종 상태를 유지하는 효과도 얻을 수 있습니다.

예

 <div 클래스="요소"></div>

 .요소 {
  너비: 100px;
  높이: 100px;
  배경색: 빨간색;
  전환: 2s easy-in-out 변환;
}
.element.animate {
  변환: 번역X(100px);
}

 const 요소 = document.querySelector('.element');
element.classList.add('animate');

이 예에서는 animate 클래스를 추가하여 요소의 transform 속성이 ​​초기 상태에서 translateX(100px) 로 전환되고 전환이 끝난 후에도 해당 상태를 유지합니다.

요약

CSS3 애니메이션의 최종 상태를 변경하지 않고 유지하려면 animation-fill-mode 속성 사용, animationend 이벤트 수신, transition 속성 사용 등 다양한 방법을 사용하면 됩니다. 각 방법에는 적용 가능한 시나리오가 있으며 개발자는 특정 요구 사항에 따라 적절한 방법을 선택할 수 있습니다.

이 글을 통해 실제 개발에서 CSS3 애니메이션을 더 잘 적용하고 필요한 동적 효과를 얻을 수 있도록 명확한 이해와 실용적인 지침을 제공할 수 있기를 바랍니다.

이것으로 CSS3 애니메이션의 최종 상태를 변경하지 않고 유지하는 방법에 대한 이 기사를 마칩니다. CSS3 애니메이션의 최종 상태를 변경하지 않고 유지하는 방법에 대한 자세한 내용은 downcodes.com에서 이전 기사를 검색하거나 아래의 관련 기사를 계속 찾아보시기 바랍니다. 앞으로는 downcodes.com을 지원하세요!