hover图片动画可以看到图片在左右移动，如何改成原位置播放？

图片素材是一长条的序列帧拼在一起的长图，想用左右移动做一个hover动画，但是做出来的效果可以看到长图往左的移动过程，实际想要的效果是在div的框里原位播放动画

图片素材

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hover</title>
        <style type="text/css">
            div{
                width: 96px;
                height: 96px;
                background: url(01.png) no-repeat;
                }
            div:hover{
                transition: 0.4s steps(13);
                background:url(01.png) no-repeat -1152px ;}


        </style>
    </head>
    <body>
        <div>

        </div>
    </body>
</html>

写一个框，把图片放进去，框以外隐藏