C3动画 打字机、奔跑的熊大的特效(借助animation-timing-function:steps()步长)

774 阅读1分钟

借助C3动画的步长animation-timing-function:steps(),实现打字机、奔跑的熊大的特效。

1、打字机

实现思路:动画序列在0%的时候,让盒子宽度为0,在100%的时候给盒子宽度。



2、奔跑的熊大

实现思路:需要2个动画序列完成。第一个动画序列,背景图片的移动(background-position),最后一点需要加上animation-iteration-count:infinate,完成熊大步子的完整动画;第二个动画序列,盒子的移动(transform:translateX()),完成熊大奔跑的动画。