序列帧动画实现

.d_c img {
    width: 134px;
    cursor: pointer;
}

.x_img{
    background-position-y: 0px;
    margin: 0 auto;
    width: 140px !important;
    height: 140px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
}

.x_img:hover{
    animation:run 1.8s forwards step-start;
}

// 依据长条形切图每个icon的高度来分割
@keyframes run{  
    0%{background-position-y: 0px;}
    5%{background-position-y: -420px;}
    10%{background-position-y: -840px;}
    15%{background-position-y: -1260px;}
    20%{background-position-y: -1680px;}
    25%{background-position-y: -2100px;}
    30%{background-position-y: -2520px;}
    35%{background-position-y: -2940px;}
    40%{background-position-y: -3360px;}
    45%{background-position-y: -3780px;}
    50%{background-position-y: -4200px;}
    55%{background-position-y: -4620px;}
    60%{background-position-y: -5040px;}
    65%{background-position-y: -5460px;}
    70%{background-position-y: -5880px;}
    75%{background-position-y: -6300px;}
    80%{background-position-y: -6720px;}
    85%{background-position-y: -7140px;}
    90%{background-position-y: -7560px;}
    95%{background-position-y: -7980px;}
    100%{background-position-y: -8400px;}
}

<li>
    <div class="x_img" style="background-image: url('images/aros/weather.png');"></div>
</li>