log('动画已结束'); // 在这里添加你想要的后续操作 }); 请注意,为了兼容不同的浏览器,你可能需要为animationend事件添加浏览器前缀,或者使用事件委托技术来确保事件监听器能够在所有支持的浏览器中正常工作。 通过以上步骤,你可以在JavaScript中灵活地调用和控制CSS动画,从而实现更丰富的交互效果。
需要有事件驱动CSS状态改变,如onclick onmousemove等,在这些事件中用js改变目标的class,即可实现。
CSS3动画也是可以做回调处理的,这里分为两个属性,一个是transition[w3c文档],另外一个是animation[w3c文档]。 1、transition 对于transition,可以监听transitionend事件,当动画完成时触发,可以这样使用: 代码如下: <!DOCTYPE html> css3-transitionend - BeyondWeb * {margin: 0; padding: 0;} .rect { widt...
用:hover或者:active又或者:focus等伪类,动画要设置重复次数
csstween.min.js matrix.js css tween 基于css3 animation和transition的动画类库,可以方便的使用js来调用。 不过因为所有实现均基于css3,所以不能像tweenmax那样使用到其他对象,只能作用于dom对象的css属性(可以查阅animation和transition可使用的css属性)。