css怎么样让动画不动,停止一个CSS动画,但让它的当前迭代完成

本文介绍了一种使用jQuery实现动画暂停及之后能够重新启动的方法。通过监听动画结束事件并在动画完成一次迭代后移除动画类的方式,实现了动画的暂停。同时,通过使用.one()确保处理程序仅运行一次,便于后续重新激活动画。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

收到动画片后,停止动画。这样的东西(使用jQuery):

CSS

@-webkit-keyframes rotate {

to {

-webkit-transform: rotate(360deg);

}

}

.rotate {

width: 100px;

height: 100px;

background: red;

}

.rotate.anim {

-webkit-animation-name: rotate;

-webkit-animation-duration: 5s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

}

HTML

TEST

JS

$("#stop").click(function() {

$(".rotate").one('animationiteration webkitAnimationIteration',function() {

$(this).removeClass("anim");

});

});

请注意,我使用.one这里(而不是.on),以便处理程序只运行一次。这样,动画可以稍后重新启动。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值