JavaScript를 사용하여 WebKit 키프레임 애니메이션 회전 값을 동적으로 설정하는 방법은 무엇입니까?

동적 키프레임 값: CSS에서 JavaScript 변수 사용

질문:

어떻게 할 수 있나요? JavaScript를 사용하여 Webkit 키프레임 애니메이션의 회전 값을 동적으로 설정합니다. 변수?

답변:

CSS에서는 JavaScript 변수를 키프레임 애니메이션에 직접 삽입할 수 없습니다. 이를 달성하려면 JavaScript를 통해 CSS 규칙을 생성하고 이를 CSSOM(CSS 개체 모델)에 삽입해야 합니다.

다음 샘플 코드를 고려하세요.

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}

동적으로 설정하려면 회전 값을 사용하려면 JavaScript 함수를 작성할 수 있습니다.

// Assume var dogValue = "20deg";
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var keyframesRule = `@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-${dogValue});}
    100% {-webkit-transform: rotate(${dogValue});}
}`;
styleElement.appendChild(document.createTextNode(keyframesRule));
document.head.appendChild(styleElement);

이 코드는 새로운