例子的笔记来自慕课网视频css动画部分

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

先解释一下：逐帧动画是特殊的关键帧动画

适用于无法进行补间计算的动画。 但是资源占用会比较多。

例子：

原始图片是这样的

逐帧动画实现猎豹奔跑 随笔

现在把它做成一个动画

   <style>
    div{
        width: 100px;
        height: 100px;
        margin: 50px auto;
        border: 1px solid black;
        background-image: url("animal.png");
        background-repeat: no-repeat;
        
    }
    @keyframes run{
        0%{
            background-position: 0 0;
        }
        12.5%{
            background-position: -100px 0;
        }
        25%{
            background-position: -200px 0;
        }
        37.5%{
            background-position: -300px 0;
        }
        50%{
            background-position: 0 -100px;
        }
        62.5%{
            background-position: -100px -100px;
        }
        75%{
            background-position: -200px -100px;
        }
        87.5%{
            background-position: -300px -100px;
        }
        100%{
            background-position: 0 0;
        }
    }
    div:hover{
        animation: run 1s linear infinite;
        animation-timing-function: steps(1);
    }
    </style>
</head>
<body>
    <div></div>
</body>

解析一下步骤

首先，把图片作为该盒子的背景，并设置no-repeat。

其次，给不同的阶段设置不同的背景位置，设置animation属性。（个人觉得原理类似于雪碧图）

然后，你就会发现效果非常鬼畜。。。是因为每一帧之间仍旧是有补间的，要把这个去掉。

最后加上，animation-timing-function: steps(1);这个属性值为的是制定每个关键帧之间有几个画面，属性值设为1，就是两帧之间只有一个画面。

 

over

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄