感谢您抽出时间来研究这一点,并对此方面的任何帮助表示赞赏。
我有以下代码。
.middle_n.expand.remove
{
animation: contractm 0.3s forwards;
transform-origin: 0 75px;
height:200%;
animation-delay: 1.3s;
}
@keyframes contractm
{
0%{}
100%{transform:translate(147.8%,100%) rotate(-16.75deg);}
}
我希望通过javascript传递一个动态值以在contractm中旋转。我怎么做。可以通过javascript运行多步动画吗?
再次感谢。
在我看来,如果你想控制你的动画而不是让它动画,我的建议是你可以使用js来控制元素的风格。因为animation
是完成一系列动画。
并且有一个非常强大的css称为css变量,你可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties上获取更多细节。
const rotate=document.getElementById("rotate")
let r=0
rotate.addEventListener("click",()=>{
r += 10
rotate.style.setProperty("--rotate", r+"deg");
})
#rotate{
--rotate:0deg;
background:pink;
width:100px;
height:100px;
transform:rotate(var(--rotate));
transition:transform 1s;
}
<p>click the square and then it will rotate.</p>
<div id="rotate"></div>
当然,如果您想要一系列动画,可以在https://developer.mozilla.org/en-US/docs/Web/CSS/animation上查看。在动画中设置步骤很容易。