用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,
有大佬知道原因的话分享一下哦