将参数传递给CSS动画

  • Z时代
  • 2024-01-10
  • 分类：问答

p {
  animation-duration: 3s;
  animation-name: slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

对于上面的动画CSS代码，我想知道是否有任何方法可以从Javascript 传递margin-left和width作为参数传递。

回答：

使用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 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>

以上是 将参数传递给CSS动画 的全部内容， 来源链接： utcz.com/qa/430699.html

回到顶部