用svg解决移动端css3帧动画抖动问题

暂时只找到这一种兼容性不错的方法，

利用SVG的一个扩展标签：foreignObject，作用是<foreignObject>SVG元素允许包含不同的XML命名空间。在浏览器的上下文中，很可能是XHTML / HTML。

然后我们在这个标签里就可以随意写html结构了

例子：

html:

<div class="big-giftbox">
     <svg viewBox="0, 0, 200, 200" class="steps_anim steps_anim_l">
          <foreignObject class="html" width="200" height="200">
               <div class="step-01"></div>
          </foreignObject>
     </svg>
</div>

 

css:

 1 .big-giftbox .steps_anim{
 2     position: absolute;
 3     width: 1rem;
 4     height: 1rem;
 5 }
 6 .big-giftbox .steps_anim_l{
 7     top: .1rem;
 8     left: .2rem;
 9 }
10 .big-giftbox .html{
11     width: 200px;
12     height: 200px;
13 }
14 .big-giftbox .step-01{
15     margin-top: -.42rem;
16     width: 200px;
17     height: 200px;
18     background: url('./pool1-03.png') 0 0 no-repeat;
19     background-size: 6600px 200px;
20     animation: biggiftStp 2s steps(33) infinite;
21     -webkit-animation: biggiftStp 2s steps(33) infinite;
22 }
23 
24 @keyframes biggiftStp{ 0%{} 100%{ background-position-x:-6600px; } }
25 @-webkit-keyframes biggiftStp{ 0%{} 100%{ background-position-x:-6600px; } }

先给大家提供一个前端咋们自己可以快速生成雪碧帧图的网址：https://pspgbhu.github.io/fsm/     需要按顺序上传每一帧图片，可横版可竖版，然后点击生成就可以了。

这样子svg标签包裹的html结构可以写px单位,svg标签本身用rem单位，svg会自动变化包裹着的内容大小，做到自适应移动端各种屏幕，也不会有帧图播放抖动的现象。

如果放在局部滚动的盒子里在安卓上会有卡顿bug.

 

最后记一下另外一种方法（有bug）：

直接使用整数rem，然后在js动态设置根元素大小的地方四舍五入，不让有小数产生，

这个方法在ios上出现奇怪的bug，安卓上是好的，

如果我设置这个有帧动画的元素默认为display：none，之后动态设置为display：block后，就是正常的，

如果直接展示就有明显背景图滑动的bug，

有大佬知道原因的话分享一下哦

转载于:https://www.cnblogs.com/chenjiecoding/p/11189646.html