CSS 애니메이션 매개변수를 동적으로 사용자 정의하려면 어떻게 해야 합니까?

매개변수화된 값으로 CSS 애니메이션 사용자 정의

제공된 CSS 애니메이션은 왼쪽에서 슬라이딩하는 요소의 지속 시간과 매개변수를 설정합니다. 하지만 상황에 따라 이러한 매개변수를 동적으로 사용자 정의하려면 어떻게 해야 할까요?

이를 달성하는 한 가지 방법은 CSS 변수를 활용하는 것입니다. 방법은 다음과 같습니다.

p {
animation-duration: 3s;
animation-name: Slidein;
}

@keyframes Slidein {
from {

margin-left: var(--m, 0%);
width: var(--w, 100%);

}

에 {

margin-left: 0%;
width: 100%;

}
}

이제 JavaScript를 사용하여 --m(왼쪽 여백) 및 --w(너비) 값을 다음과 같이 설정할 수 있습니다.

document.querySelector('.p2').style.setProperty('--m', '100%');
document.querySelector('.p2').style.setProperty('--w', '300%');

이를 통해 다음의 애니메이션 매개변수를 제어할 수 있습니다. 특정 요소를 동적으로.

예를 들어, 클래스 이름이 "p1"이고 "p2":

.p1,.p2 {
animation-duration: 3s;
animation-name: Slidein;
}

애니메이션은 변수

JS를 사용하여 CSS 변수를 변경했기 때문에 애니메이션이 적용됩니다.

첫 번째 문단은 다음을 사용하므로 애니메이션이 적용되지 않습니다. --m 및 --w의 기본값입니다. 그러나 두 번째 단락은 JavaScript에 설정된 사용자 정의 매개변수에 따라 애니메이션이 적용됩니다.

위 내용은 CSS 애니메이션 매개변수를 동적으로 사용자 정의하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!