JavaScript가 CSS 애니메이션 매개변수를 동적으로 수정할 수 있습니까?

JavaScript로 CSS 애니메이션 매개변수화

질문:

제공된 CSS 애니메이션 코드에서 동적으로 수정할 수 있습니까? 여백 왼쪽 및 너비 값 JavaScript?

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

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

답변:

예, CSS 변수를 활용하여 JavaScript에서 CSS 애니메이션으로 값을 전달하는 방법이 있습니다.

.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:

// Set CSS variables using JavaScript
document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

이 접근 방식을 사용하면 애니메이션 매개변수를 동적으로 제어할 수 있습니다. JavaScript를 통해 더욱 뛰어난 유연성과 맞춤화가 가능합니다.

위 내용은 JavaScript가 CSS 애니메이션 매개변수를 동적으로 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!