使用CSS变量,您可以轻松地做到这一点:
document.querySelector('.p2').style.setProperty('--m','100%');document.querySelector('.p2').style.setProperty('--w','300%');.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%; }}<p > This will not animate as the animation will use the default value set to the variable</p><p > This will animate because we changed the CSS variable using JS</p>


