Animiere CSS Clip

Question

Ich versuche CSS3 Übergänge zu verwenden, um ein CSS clip ohne Erfolg zu animieren. Das Bild wird nur ohne den Übergang abgeschnitten.

Was fehlt mir?

#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

Ihr Code funktioniert gut. Sie müssen es nur die richtigen „Start“ Werte geben, etwa so:

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

Nach this site, Prozentsätze in rect werden nicht unterstützt.

Wenn Sie die Größe des Bildes kennen, können Sie dies tun: DEMO

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

Oder statt 350px verwenden, könnten Sie viel größere Zahlen verwenden, um größere Bilder aufzunehmen. Möglicherweise müssen Sie mit den Zahlen experimentieren, um eine gleichmäßige Animation zu erhalten.

Answer 3

Weil Ihre erste Clip ohne Einheit, können Sie die Funktion ändern, die auf der Clip-Wechsel gearbeitet;

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