CSS 키프레임 애니메이션의 종료 각도를 동적으로 제어하려면 어떻게 해야 합니까?

동적 CSS @-키프레임 애니메이션 만들기

웹 개발에서는 요소를 특정 각도로 회전하는 애니메이션을 만들어야 할 수도 있습니다. 기본 JavaScript 회전 기술은 CPU 집약적일 수 있습니다. CSS 애니메이션은 효율적인 대안을 제공하지만 중지 지점을 제어하려면 키프레임의 동적 정의가 필요합니다.

문제:

다음 시나리오를 고려하십시오. div를 회전해야 합니다. 서버로부터 수신된 특정 각도로 기본 JS 회전은 성능 문제로 인해 실용적이지 않습니다. CSS 애니메이션은 솔루션을 제공하지만 애니메이션의 종료 각도를 결정하는 키프레임의 동적 생성이 필요합니다.

해결책:

HTML 헤드 태그에 스타일시트 규칙을 동적으로 삽입하세요. 이전 스타일을 재정의합니다. 이는 외부 라이브러리 없이도 유연성을 허용합니다. 다음 단계를 따르세요.

1. 새 <스타일> 요소를 "text/css"로 설정하고 해당 유형을 "text/css"로 설정합니다:

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

2. 키프레임 규칙을 정의하고 자리 표시자 "A_DYNAMIC_VALUE"를 원하는 각도로 바꿉니다:

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

3. 자리 표시자를 실제 각도로 바꾸고 스타일 요소를 head:

style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

이 기술을 사용하면 요소를 지정된 각도로 회전시키는 CSS 키프레임 애니메이션을 동적으로 만들고 적용할 수 있습니다.

위 내용은 CSS 키프레임 애니메이션의 종료 각도를 동적으로 제어하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!