由于浏览器内核对Gif格式的图片会产生卡的情况,所以我们需要告诉浏览器,开启一下加速,方法很简单,就是利用css3的特性,强制告诉浏览器,这是个元素,需要3D转换,请务必开启加速效果
方法1
给gif开启3D独立层渲染,就是给图片一个0度角3D旋转,使动画图片只渲染最小区域,就是给gif添加样式transform: translate3d(0,0,0),gif动画会引起全屏重新渲染,开启3d动画目的是让git动画独立渲染
方法2
如果gif没有高保真的图片你可以按桢导入ai,然后导成矢量,github上有一个叫svgo的东西好像可以优化svg动画差值。好久没用过了,矢量导出svg格式
方法3
别用gif.用css动画或者canvas动画