p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
对于上面的动画 CSS 代码,我想知道是否有任何方法可以将 margin-left
和 width
的值作为参数从 Javascript 传递。
最佳答案
使用 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 - 将参数传递给 css 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49750473/