暂时只找到这一种兼容性不错的方法，
利用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; } }
这样子svg标签包裹的html结构可以写px单位,svg标签本身用rem单位，svg会自动变化包裹着的内容大小，做到自适应移动端各种屏幕，也不会有帧图播放抖动的现象。