将参数传递给CSS动画

小编典典

将参数传递给CSS动画

css

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作为参数传递。

阅读 968

2020-05-16

共1个答案

小编典典

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

2020-05-16