@keyframes实现CSS动画帧效果

本教程教大家如何使用@keyframes，制作一个类似幻灯片的CSS动画效果。

首先我们准备一张连贯的动作图片，这里以这张熊跑路为例。

新建一个DIV容器，放这里一帧图片

<div></div>

DIV的盒子属性

div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
        }

@keyframes动作

@keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
         
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }

利用animation给DIV加上这个动作

div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }