我试图使用
CSS3过渡动画一个没有成功的CSS剪辑.图像只是剪辑而没有过渡.
我错过了什么？
#clipped {
position:absolute;
width: auto;
clip: rect(100,100,100);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#clipped:hover {
clip: rect(50px,200px,0);
}
解决方法
你的代码工作得很好.你只需要给它正确的“开始”值,如下所示：
img {
position: absolute;
display: block;
clip: rect(10px,100px,0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
img:hover {
clip: rect(80px,250px,50px);
}
<img src="http://i.stack.imgur.com/Wr86X.jpg">
