'@-Keyframes'를 사용하여 CSS 애니메이션을 동적으로 만드는 방법은 무엇입니까?

'@-Keyframe' CSS 애니메이션을 동적으로 생성

CSS 애니메이션을 동적으로 사용자 정의하려면 파리. 이 접근 방식을 사용하면 기존 스타일을 재정의하고 수신된 값을 기반으로 애니메이션 끝점을 제어할 수 있습니다.

해결책:

1. 스타일 만들기 요소:

   var style = document.createElement('style');
   style.type = 'text/css';

2. 키프레임 정의 구성:

   var keyFrames = '\
   @-webkit-keyframes spinIt {\
       100% {\
           -webkit-transform: rotate(A_DYNAMIC_VALUE);\
       }\
   }\
   @-moz-keyframes spinIt {\
       100% {\
           -webkit-transform: rotate(A_DYNAMIC_VALUE);\
       }\
   }';

3. 바꾸기 원하는 각도의 자리 표시자:

   style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");

4. 문서 헤드에 스타일을 삽입합니다:

   document.getElementsByTagName('head')[0].appendChild(style);

지정된 회전 각도로 CSS 애니메이션을 동적으로 생성하고 적용합니다. 필요에 따라 A_DYNAMIC_VALUE 자리 표시자를 조정하여 서버 제공 값에 따라 회전할 수 있습니다.

이 기술을 활용하면 상당한 CPU 리소스를 소비할 수 있는 기본 JS 애니메이션을 방지하여 성능을 최적화할 수 있습니다. 스타일시트 규칙을 동적으로 생성하면 애니메이션을 즉석에서 맞춤 설정할 수 있는 유연성이 제공되므로 추가 외부 라이브러리 없이도 사용자 경험이 향상됩니다.

위 내용은 '@-Keyframes'를 사용하여 CSS 애니메이션을 동적으로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!