動畫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%,); }