解决移动端帧动画卡顿方案

foreignObject 通过此方式引入html片段,主要为了自动化工具(webpack)去处理图片资源

.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  top: 50%;
  left: 50%; 
  margin: -5.625rem 0 0 -5.625rem; 
}
.html {
	width: 360px; 
	height: 540px; 
}
.img { 
	width: 1800px; 
	height: 540px; 
	background: url("../images/index.png") 0 0 no-repeat; 
	background-size: 1800px 540px; 
	animation: step 1.2s steps(5) infinite; 
}

@keyframes step {
  100% {
    background-position: -1800px 0;
  }
}

兼容性展示:

iOS 与 Android 4.3 兼容情况算是良好，实机测试腾讯 X5 内核的浏览器兼容仍旧良好