html+css3应用animation制作动画效果（跳动的熊）

所需素材

素材：

animationx

1.是css3新增的属性，由于动画效果

2.动画是使元素从一种样式逐渐变化为另一种样式的效果。

3.可以改变任意多的样式任意多的次数。

4.用关键词 "from"是开始 和 "to"是结束或 0%是的开始，100% 是的完成。。

html,css代码

/*css代码*/
  <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 背景颜色 */
        body {
            background-color: #ccc;
        }

        .bear {
            /* 图片可见宽高 */
            width: 200px;
            height: 100px;
            /* url添加图片，no-repeat让图片不平铺 */
            background: url(images/bear.png) no-repeat;
            /* animation动画属性设置：
            bear是绑定到选择器的 keyframe 名称，
            .4s为动画完成一个动作的时间，
            steps(8)把动画分为8部分运行，
            infinite无限播放
            逗号分隔可以写多个 */
            animation: bear .4s steps(8) infinite, mo 1s forwards;
            margin: auto;
        }

        @keyframes bear {
            /* 起始图片位置为0，0 */
            0% {
                background-position: 0 0;
            }

            /*动画完成一次循环到最后图片位置为-1600px，0 */
            100% {
                background-position: -1600px 0;
            }
        }

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

            100% {
                left: 50%;
            }
        }
    </style>
 /* html代码*/
    <div class="bear"></div>

以上是html+css3应用animation制作动画效果（跳动的熊）的代码，如果有什么不懂的可以评论或者私聊我，我为你解答，若是发现有错误，请指出谢谢，希望你们年薪过百万。