Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animate CSS clip

Tags:

css

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

like image 688
Rikard Avatar asked Jan 10 '14 23:01

Rikard


2 Answers

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">
like image 197
Stefan Gruenwald Avatar answered Oct 08 '22 23:10

Stefan Gruenwald


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.

like image 35
brouxhaha Avatar answered Oct 08 '22 23:10

brouxhaha