为啥steps(3)没有生效

准备设置一个过度效果,结果加上stpes(3)之后图片依然是一下子变化完,并不会有阶段效果

<html>
    <head>
        <style>
            div{
                width: 132px;
                height: 271px;
                overflow: hidden;
                transition: 2s steps(3);
            }
            div:hover img{
                margin-left: -396px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./兔子.png">
        </div>
    </body>
</html>

你的动画是要对img生效的,需要把transition应用到img上才行

div > img {
  transition: all 2s steps(3);
}