JavaScript 변수를 CSS 애니메이션에 어떻게 전달할 수 있습니까?

JavaScript를 사용하여 CSS 애니메이션에 변수 전달

CSS 애니메이션 작업 시 JavaScript에서 값을 매개변수로 전달하는 기능은 매우 유용할 수 있습니다. 이는 역동적이고 상호작용적인 경험을 가능하게 합니다.

해결책: CSS 변수

CSS에서 변수를 사용하면 JavaScript에서 애니메이션으로 값을 전달할 수 있습니다. 예를 들어:

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

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript의 구현

JavaScript를 사용하면 다음 변수를 설정할 수 있습니다.

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

사용 예

"p2" 클래스를 사용하여 요소의 애니메이션을 변경합니다.

<p class="p1">
 This will not animate as the animation will use the default value set to the variable
</p>
<p class="p2">
  This will animate because we changed the CSS variable using JS
</p>

위 내용은 JavaScript 변수를 CSS 애니메이션에 어떻게 전달할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!