动画之奔跑的小熊

一、对小熊的奔跑分析:
在这里插入图片描述
宽为1600px,高位100px,分为八组小图,因此可以使用动画的步长来实现小熊的奔跑。
首先设置小熊的起始背景位置0%为0 0;100%奔跑到1600px的位置。于是小熊完成了连贯的的动画行为。

 @keyframes steps {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

但是它还是处于初始的位置,于是需要添加一个move的动画,让小熊在从left为0,跑到可视区的中央left:50%,还需要向左移动小熊的一半宽,才达到小熊在在中央;

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

            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }

最主要的是,两个动画用短号隔开。
html

    

css

 

你可能感兴趣的:(动画之奔跑的小熊)