精靈圖（sprite）CSS動畫實現

精靈圖

動畫效果如下

HTML代碼

<div class="boxA"></div>

css代碼

.boxA {
    width: 100px;
    height: 400px;
    background:url("https://img-ask.csdn.net/upload/202005/13/1589349016_808127.png") no-repeat;
    background-size: 600% 100%;
    -webkit-animation: bird-slow .5s steps(5) infinite;
    animation: bird-slow .5s steps(5) infinite;
}

@keyframes bird-slow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}
@-webkit-keyframes bird-slow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}