css3-帧动画实现和优化

实现帧动画好多种方式,如css3,gif动图,视频,js帧动画,很多做实验比较这几种方式的优劣,最终还是推荐了css3动画

我就直接说实现方式把

1 css3代码

html:

css:

2animate()

keyframes 关键帧

一个对象,代表关键帧的一个集合

options 可选项代表动画持续时间的整形数字 (以毫秒为单位), 或者一个包含一个或多个时间属性的对象

例如上面的动画用函数写就是:

这么好用的东西当然兼容性很差了啊,所以你要想用这个函数,需要使用https://github.com/web-animations/web-animations-js

 

 

参考文章:

  1. 强大的CSS3/JS:帧动画的多种实现方式与性能对比
  2. CSS3动画卡顿性能优化解决方案
  3. 借助Web Animations API实现JS keyframes动画

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据