동적 CSS @-Keyframe 애니메이션을 어떻게 만들 수 있나요?

동적 CSS @-Keyframe 애니메이션 생성

웹 개발 영역에서 CSS @keyframes 애니메이션의 동적 생성은 귀중한 작업이 될 수 있습니다. 도구. 이는 특정 위치에서 멈추는 기능과 같은 특정 매개변수가 포함된 맞춤 애니메이션이 필요할 때 발생합니다.

이를 달성하려면 웹페이지에 CSS 스타일을 동적으로 삽입할 수 있습니다. 이 방법을 사용하면 기존 스타일을 재정의하고 추가 라이브러리로 인한 불필요한 부담을 피할 수 있습니다.

해결책:

다음 코드를 구현하세요.

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = `
@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
`;
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

이 코드 조각은 <스타일> 요소를 문서 헤드에 추가하고 CSS @keyframes 규칙을 동적으로 삽입합니다. 그런 다음 style.innerHTML을 사용하여 자리 표시자 "A_DYNAMIC_VALUE"를 애니메이션에 대해 원하는 중지 값으로 바꿀 수 있습니다.

위 내용은 동적 CSS @-Keyframe 애니메이션을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!