准备设置一个过度效果,结果加上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);
}