逐帧动画
动画是一帧帧的跳动,去除帧中间的过渡效果,
将animation动画animation-timing-function设置为steps函数
steps(<integer>[, [ start | end ] ]?)
第一个参数指定每两个关键帧之间分几步完成
第二个参数为可选参数start | end,默认值为end
step-start在变化过程中,是以下一帧的显示效果来填充间隔动画
step-end在变化过程中,是以上一帧的显示效果来填充间隔动画
- 图片处理
(将图片拼接成单列雪碧图) css
.app { width: 2rem; // 显示动画盒子的宽度,确保为一帧画面的宽度 height: 2rem; // 显示动画盒子的高度,确保为一帧画面的高度 background: url("./imgs/image.png") no-repeat; background-position: 0 0; background-size: 2rem; // 这里需要保证背景图片的宽度与盒子宽度一致 animation: myAnimation 5s steps(124) infinite; // steps(124) 124为雪碧图的动画帧数 } @keyframes myAnimation { to { background-position: 0 -248rem; // 雪碧图动画结束位置 } }
- 参考animation-timing-function
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。