动画CSS剪辑

Question

我想使用CSS3转换为CSS clip设置动画，但没有成功。图像只是剪辑而没有转换。

我错过了什么？

#clipped { 
    position:absolute; 
    width: auto; 
    clip: rect(100, 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, 200px, 0); 
} 

Fiddle

Answer 1

你的代码工作得很好。你只要给它正确的“开始”的价值观，就像这样：

img { 
 
    position: absolute; 
 
    display: block; 
 
    clip: rect(10px, 100px, 200px, 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, 200px, 250px, 50px); 
 
}

<img src="http://i.stack.imgur.com/Wr86X.jpg">

Answer 2

根据this site，在rect百分比是不支持的。

如果您知道图像的大小，你可以这样做：DEMO

#clipped { 
    clip: rect(0, 350px, 350px, 0); 
} 

或代替使用350px，你可以使用更大的数字，以适应较大的图像。您可能需要使用数字来获得均匀的动画。

Answer 3

因为你没有单位第一个剪辑，你不能改变它的剪辑的变更工作的功能;

clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%); } 

span:hover:before{ clip-path: polygon(0% 0%,100% 0%,0% 100%,0% 100%,); }