I am trying to use CSS3 transitions to animate a CSS clip
with no sucess. The image just clips without the transition.
What am I missing?
#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
Your code works just fine. You just have to give it the correct "start" values, like 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">
According to this site, percentages in rect
aren't supported.
If you know the size of the image, you can do this: DEMO
#clipped {
clip: rect(0, 350px, 350px, 0);
}
Or instead of using 350px
, you could use much larger numbers to accommodate larger images. You may need to play around with the numbers to get an even animation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With