共计 579 个字符,预计需要花费 2 分钟才能阅读完成。
逐帧动画
动画是一帧帧的跳动,去除帧两头的过渡成果,
将 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
正文完