CODEWITHSUNDEEP
css
Rikard
Rikard

Reputation: 7805

Animate CSS clip

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

Upvotes: 7

Views: 15774

Answers (3)

tianfanfan
tianfanfan

Reputation: 1

Because your first clip without unit, you cannot change the function which worked on the clip's changing;

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

Upvotes: 0

Stefan Gruenwald
Stefan Gruenwald

Reputation: 2640

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="https://i.sstatic.net/Wr86X.jpg">

Upvotes: 16

brouxhaha
brouxhaha

Reputation: 4093

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.

Upvotes: 6

Related Questions