HTML——steps 奔跑的白熊

利用H5和C3制作奔跑的白熊

本次需要用到的素材图片： 一、概念

steps 函数是 animation-timing-function 属性的一个值，steps函数接收两个参数： number 和position 。 number： number 表示动画被分成了多少段；position： position 参数可选，默认为 end 。

二、效果 视觉效果上一只熊从电脑屏幕左侧跑到中间停止向前原地奔跑。

三、思路

1. 先设置一个盒子，大小刚好能显示白熊奔跑的一张图片，放上白熊的图片
2. 白熊奔跑需要用到动画@keyframes实现，注意最后重复奔跑的动作，要用到animation-iteration-count：infinite
3. 白熊盒子从屏幕左侧移动到中间，也需要设置新的动画，最后停在屏幕中间，需要用到animation-fill-mode：forwards
4. 一个元素可以引用多个动画，之间用逗号隔开
5. ※※※※※※※※※※※※重头戏：为了能够实现这种在逐帧动画效果，需要引出3D动画新的属性——steps（）。在括号内输入数字，他会按照数字实现分步效果。

四、实践

1. 在body区设置个div盒子

<div></div>

2. 为盒子赋予绝对定位（因为本案例只涉及一个盒子，其父盒子是body，因此不用设置相对定位），使其位于屏幕中间，再设置白熊背景图片

CSS

div {
            position: absolute;
            top: 50%;
            left: 0;
            width: 200px;
            height: 100px;
            background: url(image/熊大.png);
}

3. 设置白熊奔跑的动画，需要用到background-position参数：background-position 属性设置背景图像的起始位置，通过变换不同的位置达成白熊在奔跑的效果。

CSS

div{
    animation: bear .8s steps(8) infinite
}

*由于图片共有8张，因此设置steps(8)，最后设置infinite让动画循环*

@keyframes bear {
            0% {
                /* background-position是背景图片起始位置，通过变换背景图片的位置让熊看起来像奔跑 */
                background-position: 1600px 0;
            }
            100% {
                background-position: 0 0;
            }
        }

4. 奔跑做好了来做向前跑的效果，再设置一个新的动画，0%时不变，100%时左移动50%

CSS

div{
    animation: bear .8s steps(8) infinite, move 2.5s forwards;
    }

*元素可以调用多个动画，用逗号隔开；forward指动画结束后停留，不返回最先位置*

@keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
            }
        }

四、小结

1. 逐帧动画效果用到steps()，括号内输入数字
2. 元素可以调用多个动画，用逗号隔开
3. background-position是背景图片起始位置，通过变换背景图片的位置让熊看起来像奔跑