animateCSS动画程序接口(Chrome可用)

发布时间:2024-05-30 点击:166
jquery中很早就提供了animate方法,使用它可以很方便地实现一些简单动画效果。后来css3中也提供了animation用于动画效果制作,但css本身的可操作性太差,所以用起来并不方便。现在最新版的chrome原生支持了animate方法,弥补了css的操作缺陷。元素上的animate方法有两个参数。第一个参数是动画的关键帧列表,是一个数组,每一个数组项都是一个javascript对象,可以在上面设置这个关键帧上元素的样式属性,并且使用offset属性表示这个关键帧在整条时间轴中的位置百分比;第二个参数是动画播放的配置参数,用于描述动画的时长、播放速度、过渡方式,等参数。从css的角度看,这个animate方法的第一个参数就是在创建keyframes,第二个参数是为元素添加animation样式属性。整个逻辑和css中使用animation没什么区别。下面是使用的演示:运行函数除了可以调用之外还有返回值,这个animate方法会返回一个animationplayer对象实例,它提供了一个onfinish事件和一个cancel方法,具体作用看名字就能猜到。


上海网站制作过程中需要注意哪些细节问题
中小型企业如何做好网络推广?
各企业在选择网站设计公司时:适合就好?
带你玩转微信小程序直播
设计感和实用性结合,网站制作才可能成功
营销型网站制作都有些特的呢点
分分钟就能学会的文章撰写技巧方法!
网站建设如何做好网页制作?看看这些创意